[React] 하위 컴포넌트의 트리거로 상위 컴포넌트에서 무한 랜더링 지옥 해결하기

메인 프로젝트의 코드를 재 구성하고 공부하면서 여러모로 왜 코드를 저렇게 짰을까 하는 생각이 드는 코드들이 많았다... 

몇 달 전 ... 나... 정신.. 

 

# 파일 구조

CommunityDetail ( 커뮤니티 데이터 전체 조회 )

     - CommentBox ( 개별 커뮤니티 아이템 )

 

 

어제 밤에 코드를 좀 정리하고 (특히, Comment 파트) 잘 돌아가는거 확인하고? 오늘 아침에 다시 정리하려고 딱 켰는데... ... 

 

 

# 게시글 상세 클릭 시 벌어지는 일  : 공포 그 자체 

머..멈춰....

 

어제는 안 그랬는데 왜 갑자기 게시글 상세 요청이 무한 요청이 되는 거지.....라는 두려움이 발생했다.. 우리의 GPT 씨의 도움으로 상위에서 랜더링 되는 의존성의 useState 요소가 하위에서 건드려지면서 무한으로 계속 리랜더링 되는 것이 원인인 것 같았다. 

 

 

 

# 상위 CommunityDetail에서 하위로도 뿌리는 랜더링 요소.
useEffect의 의존성이 이 useState의 render 값..

  const [render, setRender] = useState(true);
  
  const handleRender = () => {
    setRender(!render);
  };
  
  
    useEffect(() => {
    const findBoardsById = (id: string) => call(`/boards/${id}`, 'GET', null);
    const getMember = async () => {
      return findBoardsById(boardId as string)
        .then((res) => {
          setMemberData(res);
        })
        .catch((err) => console.log('커뮤니티 상세 페이지 예시' + err));
    };

    getMember();
  }, [boardId, render]);

 

 

 

# 원인을 찾은 듯..

아래의 하위 컴포넌트의 useEffect의 의존성을 보면 우선 하위 컴포넌트가 로드될 때 무조건 handleRander함수가 실행되고 의존성도 handleRender 함수 실행의 여부이니까.... 하위에서 무한으로 트리거가 발생해서 계속 요청이 되었던 듯 하다... ㅠㅠ

 

 

 

# 해결법은.. 하위 컴포넌트의 useEffect 자체를 없애버리기

[ 1번 시도 ] : useEffect안의 handleRender() 함수만 제거. 

: 하지만 생각해보면, 상위 컴포넌트에서 어차피 handleRender 함수로 인해서 변경되는 render 값에 의존해서 페이지를 리랜더링 하는데 굳이 하위 컴포넌트에서도 useEffect가 필요한가 싶었다. 

 

어차피 댓글 등록 버튼이 작동할 때만 handleRender 함수가 작동하도록 했으니까 하위에서는 없애도 되겠다고 결정!

 

 

[ 2번 시도 ] : 하위 컴포넌트에서 useEffect 지우기

 

끄헝헝헝 성공 ㅜㅜㅜ