이번 WIL의 키워드 :
실전을 진행하며 기술적으로 막혔던 부분, 해결했다면 해결 과정
댓글 기능을 작업하면서 redux와 redux-toolkit을 사용하지 않고 해보고 싶었다.
그리고 컴포넌트를 최대한 독립적이고 재사용 가능한 부분으로 분리해보려고 시도 했었다.
그렇게 해서 댓글 기능을 담당하는 컴포넌트를 총 3개로 나눴고, 아래와 같다.
|- src
| |- components
| | |- comments
| | | |- commentItem
| | | |- commentPost
| | | |- commentsForm
|- app.js
|- index.jscommentItem은 등록 된 댓글 하나의 컴포넌트이며 여기에서 수정 삭제 기능을 사용하고 있다.commentPost는 댓글을 등록하기 위한 컴포넌트이며 여기에서 등록 기능을 사용하고 있다.commentsForm은 위 2개의 컴포넌트를 하나로 묶어주는 컴포넌트이며
여기에서 전체 등록된 댓글을 조회하고 조회 된 친구들을 화면에 보여주기 위해
props로commentItem컴포넌트로 전달하고map()을 사용해 렌더링 해주고 있다.
props로 전달하는 값들을 commentItem 컴포넌트에서 useState를 사용해 관리하고 있었다.
짧은 지식으로 state가 변경될 때 마다 화면을 새롭게 렌더링 해준다고 알고 있었는데..
여기서 문제는 등록, 삭제, 수정이 바로 반영이 안되고 새로고침을 해야만 화면에 보여진다는 것이다.
useEffect를 사용해 바뀌는 state를 의존성 배열에 넣어도 보고
전체 조회를 commentItem 컴포넌트에서도 시도 해봤는데 점점 미궁속으로 빠져들고 있었다.
개인 프로젝트가 아닌 팀 프로젝트로 혼자 이 부분에서 너무 오랜 시간을 사용할 순 없었고,
리더를 맡고 있는 팀원에게 도움을 청했다. 그리고 생각보다 간단하게 문제를 해결 할 수 있었다.
const [isLoading, setIsLoading] = useState(false);
const getAllComments = () => {
axios
.get('api')
.then((res) => {
setIsLoading(true);
});
};
useEffect(() => {
getAllcomments();
}, [isLoading]);
// setIsLoading을 각 Item, Post 컴포넌트로 전달하고 등록, 수정, 삭제 통신을
// 요청할 때 마다 state의 상태가 변경되고 리렌더링이 되는 조건을 만들었다.게시글 전체 조회를 담당하는 컴포넌트에서 boolean을 관리하는 state를 만들고
해당 state의 값이 바뀔 때 마다 리렌더링을 되는 조건을 만들어 줬다.
위에서 리렌더링이 안되던 부분은 해결은 됐지만 여기에서 생기는 문제로는
이런 과정을 통해 화면이 바뀌게 되면 게시글의 조회수가 2번씩 올라간다는 점이다.
일단은 여기까지 해결했고.. 아직 나에게 남은 작업 분량들을 처리해야해서
추후에 2번씩 올라가는 조회수는 어떻게 하면 해결할 수 있을지 고민해 볼 예정이다.
