[Coddit] useEffect와 Custom Hook

💥에러 발생

Coddit 프로젝트에서는 포스트를 클릭하면 해당 포스트의 내용과 댓글 등을 modal로 띄우는 방식을 사용하고 있다. 이를 위해서는 클릭한 포스트의 내용과 댓글들을 state로 관리해야 했다.
사용자가 투표나 댓글 작성, 댓글 투표 등의 기능을 사용할 때 해당 state들이 변경되면 함수를 호출해 페이지가 자연스럽게 변경되게 기능을 구현했고, 이 때, useEffect를 사용하여 해당 state들이 변경될 때마다 호출하는 방식을 사용했다.

💦에러 원인

[에러 발생 초기 코드]

    useEffect(() => {
     modalContext.setState(currentPost[0]);
    }, [currentPost]);
  };

currentPost가 변경될 때마다, useEffect의 첫 번째 인수로 정의된 함수가 실행되며, 해당 함수는 modalContext에서 setState 함수를 호출하여 선택된 게시물의 첫 번째 요소를 모달 창에 표시하는 코드다. 하지만 첫 렌더링 시 오류가 발생해 렌더링이 되지 않는 문제가 발생했다. 구글링을 해보니 useEffect가 첫 렌더링 때도 실행된다는 원인을 찾을 수 있었다.

💫해결 방안

이를 해결하기 위해 Custom Hook을 사용하기로 했다. useEffect를 대신하여 사용할 함수를 만들어야 했는데, Custom Hook을 사용해 useEffect와 유사하게 작동하지만 최초 렌더링 시에는 실행되지 않도록 설정할 수 있었다.

최종적으로 변경된 코드는 다음과 같다.

const useDidMountEffect = (func, deps) => {
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) func();
    else didMount.current = true;
  }, deps);
};

useDidMountEffect(() => {
  modalContext.setState(currentPost[0]);
}, [currentPost]);

useRef Hook을 사용하여 최초 렌더링 시에는 false를 반환, 최초 렌더링 이후에는 true를 반환하도록 설정해 이후부터는 useEffect와 동일하게 작동하게 만들었다.