🎯 Trouble Shooting 컴포넌트 리턴 후 발생하는 렌더링 에러

페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.

🚨 Rendered more hooks than during the previous render.

채팅 페이지 정보를 가져오다 발생한 에러.

• 페이지 렌더링 후 새로고침 시 바운더리 에러 발생.
  로직 순서는

1. useParams를 통해 채팅방 정보를 가져온다.
2. currentUser를 이용해 로그인한 유저의 정보를 가져온다.
3. 유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.
4. 유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.
5. 채팅방 페이지를 렌더링한다.

에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.

☑️ 문제 코드

const ChatRoomPage = ()=> {
const { id : chatId } = useParams();
const currentUser= useRecoilValue(currentUserAtom);

if (!chatId) return ;
if (!currentUser) return ;


const [chatsList, setChatList] = useState<Chats[]>();
const [messages, setMessages] = useState<ChatMessage[]>([]);

useEffect(()=> {
    ...
    }, []);

return (
   ...
   )
}

React 컴포넌트가 렌더링될 때 훅의 호출 순서나 개수가 일관되지 않을 때 발생하는 에러. React는 훅이 렌더링마다 동일한 순서와 개수로 호출되어야 하는데 렌더링 중에 훅의 호출 순서나 개수가 변경되면 React는 훅의 상태를 제대로 관리할 수 없어서 해당 에러가 발생한다.

☑️ 해결

React에서는 Hooks는 리턴문 앞에서 모두 선언하도록 한다.
위 코드와 같이 유저정보나 채팅방 정보를 확인해야하는 페이지일 경우에는 어떻게 해결해야할까.

아주 좋은 방법은 아니지만 기본을 지키는 방법으로 상태 관리와 조건문의 순서를 지켜서 작성하였다.
깔끔하게 작성할 수 있는 코드를 고민하다 이미 배포되어 있는 서비스 이기에 에러부터 해결하자는 생각에 , useParams로 받아오는 chatId 값은 string으로 타입을 명시하고 함수에서 props로 받아 사용하도록 만들었다.
유저정보를 확인하는 커스텀 훅을 이용하여 조건문을 관리하거나, chatId나 currentUser를 이용하는 함수값에 props로 값을 넘겨주는 방법도 생각했다.

☑️ 해결 코드

const ChatRoomPage = ()=> {
const { id } = useParams();
const chatId = id as string;
const currentUser= useRecoilValue(currentUserAtom);


const [chatsList, setChatList] = useState<Chats[]>();
const [messages, setMessages] = useState<ChatMessage[]>([]);

useEffect(()=> {
    ...
    }, []);

if (!chatId) return ;
if (!currentUser) return ;

return (
   ...
   )
}

React Hook을 다룰 때는 반복문, 조건문 혹은 중첩된 함수 내에 Hook을 호출 하면 안된다.
https://ko.legacy.reactjs.org/docs/hooks-rules.html

이번 실수를 통해 다시 한번 숙지하게되었다.
아래 코드는 기본 틀린 예시

if(test ==='test') {
 const [count , setCount ] = useCount(0);
}

미리 상태 관리하는 훅이 선언되기 전에 컴포넌트 내에서 조건문으로 리턴을 하게 되었을 때, 새로고침 후 렌더링 에러 (= 컴포넌트가 리턴된 후에 발생하는 렌더링 에러)가 발생한다.

위에 ChatRoomPage 처럼 채팅방 정보나 현재 유저의 정보를 확인해줘야하는 코드를 작성할 때 Custom Hook을 활용하여 렌더링 시킬 수 있다.

 

~~호출하기전 이전 페이지에서 id값이 없을 경우에 예외처리하는 것을 필수~~