페이지 진입, 새로고침시 페이지 render안되는 현상

commentPage에 진입 시, 새로고침시에는 화면이 안 뜨는데 코드를 추가하면 화면이 뜨는 이상한 현상이 있었다.

 

원인

  useEffect(() => {
    getBoards(Number(mindId)).then((res: BoardsType[]) => {
      setMindData(res);
    });
    const filterMindData = mindData.filter((data) => {
      return data.boardId === Number(postId);
    });
    setPostData(filterMindData[0]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refresh]);

이 코드 전체를 이해할 필요는 없고 api를 통해서 데이터를 가져오는 코드이며 useEffect 두 번째 인자로 [refresh]를 갖는다만 알고 있으면 된다.

refresh는 useState사용 시 데이터 값이 변경되었을 때 새로고침을 해야 적용이 되는 현상 때문에 넣은 것이다.

페이지에 들어갈 때와 새로고침할 때는 refresh는 변경이 안됨으로 []로 보면 된다.

 

 

useEffect는 컴포넌트 안의 html를 렌더링 이후에 동작한다. 

useEffect(()=>{ 실행할 코드 }, [])두 번째 인자로 []를 가질 때 컴포넌트 mount시 1회만 실행이 된다.

그러

 

그래서 원인은 무엇이냐!!

데이터를 받아와서 html를 렌더링을 해야 하는데 데이터를 받기 전에 html를 렌더링 하여 빈 화면을 보여주고 그다음에 데이터를 받아오기 때문이다.

두 번째 인자를 삭제해 주면 잘 실행된다.

 

 

새로운 버그

  useEffect(() => {
    getBoards(Number(mindId)).then((res: BoardsType[]) => {
      setMindData(res);
    });
    const filterMindData = mindData.filter((data) => {
      return data.boardId === Number(postId);
    });
    setPostData(filterMindData[0]);
    console.log(1);
  });

무한으로 getBoards가 실행되는 새로운 버그가 생성된다!!! 하..

useEffect(()=>{ 실행할코드 })시 재랜더링 될 때마다 계속해서 실행되기때문이다.

 

또한 코드상에 mindData가 업데이트 되기전에 filterMindData함수에서 mindData가 사용되서 문제도 있었다.

 

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await getBoards(Number(mindId));
        setMindData(res);

        const filterMindData = res.filter((data) => {
          return data.boardId === Number(postId);
        });
        setPostData(filterMindData[0]);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [mindId, postId]);

그래서 async await 함수를 사용해서 해결을 하였다.

 

느낀점

useEffect를 생각없이 사용하고 있었다.

mount, update, unmount의 개념을 정확하게 이해하고 항상 비동기를 생각하면서 코드를 짜자