🚨[costagram] Warning: Cannot update a component (`Batcher`) while rendering a different component 오류(경고)

🚨 문제상황

Navbar 컴포넌트가 렌더링 되는 동안 Batcher 라는 컴포넌트 업데이트가 이루어질 수 없다라는(?) 경고 발생!
To locate the bad setState() call inside Navbar라고 되어있는 걸 보니 어떠한 이유로 navbar에서 setState 함수를 부를 수 없다는 경고인 것 같다.

❓ 문제 상황 분석

• 먼저 Navbar 의 어떤 부분에서 경고가 뜨는 건지 찾아보았다. (setState 함수 사용하는 부분을 찾아보았다.)

• Navbar 에 검색창으로 사용되는 input 이 있는데, 이 input에 작성되는 내용을 useState를 이용하여 저장하고 있었고, 이 state 값이 빈 값일 경우 recoil을 이용해 관리하고 있는 sortedData(검색된 유저가 작성한 글(data)만 담긴 배열) 의 값을 useSetRecoilState 를 이용하여 빈 배열([])로 설정해주는 로직을 짜뒀었다.
  

• useSetRecoilState인 setSortedData 가 경고에서 말해주는 setState였고, 검색해보니 이를 useEffect로 처리해주어야 한다고 했다.
  🐛 컴포넌트가 렌더링 되는 동안 함수가 호출되어 컴포넌트 렌더링 진행 중 에러가 발생한 것이라고 한다.

✨ 문제 해결

- useEffect를 사용해보라는 글을 본 후 위의 조건문을 useEffect 안에서 처리되도록 넣어준 뒤, dependency array로 발생조건을 searchName을 넣어줌으로써 searchName이 변경될 때마다 조건 실행이 되도록 해주니 경고메세지가 사라졌다 :)