React "too many re-render" 문제 해결

목적

관리자 모드로 로그인 시 사이드바에 '신고관리' 메뉴가 추가되도록 만들고 싶었다.

 

 

 

문제

아래처럼 코드를 짜니 감당하기 힘들 정도로 많은 리렌더링이 일어난다는 에러가 떴다.

 if (isAdmin == 'ROLE_ADMIN')

            setItems((prevItems) => [

                ...prevItems,

                { name: '신고관리', path: `/space/admin/report` },

            ]);

 

 

 

해결

컴포넌트는 state가 변경되면 리렌더링 되는데, 이렇게 바디에 setState를 사용하게 되면 setState가 읽혀 리렌더링이 일어나고, 리렌더링이 일어나면 setState가 또 읽혀 리렌더링이 발생하고... 리렌더링을 무한 반복하게된다.

따라서 특정 조건에서만 setState가 호출되도록 useEffect와 같이 사용해주면 끝!!

state가 변경되면 리렌더링 된다는 사실을 알고 있으면서 생각없이 코딩한 결과다...

 useEffect(() => {

        if (isAdmin == 'ROLE_ADMIN')

            setItems((prevItems) => [

                ...prevItems,

                { name: '신고관리', path: `/space/admin/report` },

            ]);

    }, []);