Effect는 React 패러다임에서 벗어날 수 있는 탈출구이다. Effect를 사용하면 React의 외부로 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있다. 즉, 외부 시스템이 관여하지 않는 경우에는 Effect가 필요하지 않다. 불필요한 Effect를 제거하면 코드의 가독성이 좋아지며, 실행 속도가 빨라진다. 또한 오류 발생률도 줄어든다. 불필요한 Effect를 제거하는 방법 Effect가 필요하지 않는 경우는 일반적으로 2가지가 있다. ▶ 렌더링을 위해 데이터를 변환하는 경우. 예를들어, 목록을 표시하기 전에 필터링을 하고 싶은 경우를 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 Effect를 작성하고 싶을 수 있다. 하지만..

프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 발생한 문제였다. 문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에 문제가 된다고 알려주는 것 같다!