😀주제: Demo를 기반으로 각 파트별 멘토님과 중간 회고와 점검을 진행해 주세요
질문1: 상태관리에대해서 질문입니다. (contextAPI를 사용하고 있습니다.)
지금 내 정보에대해서만 전역에서 상태관리를 하려고합니다.
header, 왼쪽바에 내소개와 팔로우/팔로잉부분, 태그목록이 제가 말씀드린 전역관리에 포함되는 부분입니다. (파란색으로 동그라미친 3개)
상태가 변경되야할 경우는 아래 3가지 경우입니다.
- 내정보를 변경할 경우 - 프로필이미지, userName, 자기소개 정도 가 있습니다.
- 글 작성을 할경우/삭제할 경우 - 태그가 하나 추가되거나, 제거, 해당 태그에대한 글개수 “(괄호안 숫자)” 가 있습니다.
- 팔로우/팔로우취소시 - 해당 팔로우 숫자가 줄어들거나 늘어야 합니다.
이때 제가 고민되는건 위 세가지상황을 각각 action으로 만들어서 낙관적으로 업데이트 해줄지,
세가지 상황에서 api를 날리고 내 정보에 대한 api를 다시 요청해 전역을 다시 변경해줄지 고민입니다. 맨토님의 의견을 들어보고 싶습니다.
( +추가질문: react-query를 지금와서 사용할 수 있을까요? )
getProfile(내정보) = { profileId: 1, imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvyT-fcCPkfYWQQ1UwkNyRPevaYT1hpA8dRMYk1zFvar4t5KDrDHji_e74bM_cV-MreDM&usqp=CAU", favoriteCategories: ["인문", "정치", "사회"], username: "user", bio: "hi i'm user", followerCount: 3, followeeCount: 2, tags: [ { name: "JAVA", count: 5, }, { name: "JAVASCRIPT", count: 5, }, ], categories: ["인문", "정치", "사회"], };
질문2: 페이지네이션 관련 질문입니다.
- ‘제거된 카드 입니다. ‘로 보여주기
- 제거 시키고, 동일한 페이지로 다시 랜더링 시키기
질문3: 페이지 관련 질문입니다.
my페이지에서 category, tag, favorite페이지가 있는데 이 3개의 페이지가 헤더, 사이드바가 거의 동일하고, 안에 내용만 필터링해서 보여주는데 next로 각각의 페이지로 만들다 보니 중복 코드가 너무 많습니다.
이런 경우 어떻게 해야 효율적으로 구현 가능한지 궁금합니다.
질문4: API 요청 담당 관련 질문입니다.
- “팔로우 +” 버튼을 클릭하면
팔로우하기API를 요청한 뒤 “팔로우 +” → “팔로우 취소" 버튼으로 변경해야 합니다.
- Q. 이때
팔로우하기API를 요청을 페이지에서 해야할지, Follow 컴포넌트에서 해야할지 고민입니다. - 페이지에서 요청을 한다면,
- 페이지마다 API를 요청하는 코드가 중복된다는 점이 있습니다.
- Follow 컴포넌트에서 요청을 한다면,
- Follow 컴포넌트가 API를 요청할 때 실행할 콜백 함수를 페이지로부터 받아 페이지 단에서도 팔로우하기로 변경될 점들을 해당 콜백 함수로 처리할 수 있을 것 같습니다. (콜백 함수로 처리 하는 것이 맞나요?)
Follow
// Follow api call 성공 하면 response ~~
FollwButton {props: follow)
const [isActive, setisActive] = useState<boolean>(follow.active) // false. >> true
// Follow 추가
onClick ⇒ following 요청을
// success == response //
// setisActive(!isActive)
key // friendList
// follow // mutate
Button // isActive ? 팔로우 : 팔로우 취소