👨‍💻 사건

• 팀프로젝트 중 기본적인 기능 구현을 마친 후, node 창을 살펴보니 같은 내용의 warning 문구가 발생하는 것을 볼 수 있었다. (**React Hook useEffect has a missing dependency)** 이를 해결하고자, 여러 방면으로 찾아 보았다.
  

✅ 해결

일단, 간략하게 말하자면 useEffect 에서 실행된 함수의 변수값을 useEffect 의존성배열에 설정을 안해주어서 생긴 문제이다.
이를 해결하기 위한 방법이 두가지 존재한다.

1. useEffect 안에 함수를 선언해주고, 그 함수에 발생한 변수값을 useEffect 의존성 배열안에 설정해두기

   useEffect(() => {
   	const getChatroomData = () => {
     axios({
       url: `https://mandarin.api.weniv.co.kr/post/${chatRoomId}`,
       method: 'get',
       headers: {
         Authorization: `Bearer ${userToken}`,
         'Content-type': 'application/json',
       },
     })
       .then((response) => {
         setChatRoomData(response.data.post);
       })
       .catch((error) => {
         console.log(error);
       });
   	};
   	if(chatRoomId&&userToken){
   	  getChatroomData();
   	}
   }, [chatRoomId,userToken]);

2. 주석을 통해 예외처리하기 ( 근본적인 해결방법은 아님 )

   → 그럼에도 사용하는 이유 : 재사용도 해야하고, 변수가 없는 함수를 useEffect를 통해 렌더를 해야할 경우에는 어쩔 수 없이 주석처리를 하여 사용한다.

   const getChatroomData = () => {
     axios({
       url: `https://mandarin.api.weniv.co.kr/post/${chatRoomId}`,
       method: 'get',
       headers: {
         Authorization: `Bearer ${userToken}`,
         'Content-type': 'application/json',
       },
     })
       .then((response) => {
         setChatRoomData(response.data.post);
       })
       .catch((error) => {
         console.log(error);
       });
   };
   useEffect(() => {
     if(chatRoomId&&userToken){
   	  getChatroomData();
   	}
   	// 아래와 같은 주석처리를 통해, eslint warning이 발생하지 않도록 설정한다.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chatRoomId,userToken]);

💭 개선

팀 프로젝트 중, 1의 방안을 택할 수 있음에도 2를 쓴 경우는 리팩토링 과정을 거칠 예정이다.