리액트 훅 중 하나인 useEffect에 대해 알기 위해서는
먼저 리액트가 하는 일과 하지 않는 일에 대해 살펴볼 필요가 있다.
🙆♀️ 리액트가 하는 일 (Main Job)
UI를 렌더링하고 사용자 입력에 따라 반응하기
- JSX를 평가하고 렌더링 하는 것
- state와 props를 관리 하는 것
- event와 input에 반응하도록 하는 것
- state와 props가 바뀜에 따라 컴포넌트를 리렌더링 하는 것
🙅♀️ 리액트가 하지 않는 일 (Side Effect)
화면을 그리는 것과 관계 없는 것
- 브라우저 저장소에 데이터 저장하기
- 백엔드 서버에 HTTP 요청 보내기
- Timer를 세팅하고 관리하기
- 키 입력에 따라 유효성을 확인하고 응답 보내기
(어떤 액션에 대한 응답으로 특정 액션을 보내기)
🤔 사이드 이펙트가 함수 컴포넌트 내에서 실행된다면?
예를 들어 API에서 받은 데이터가 어떤 state에 세팅된다고 했을 때,
그 state 값이 바뀌면 컴포넌트가 리렌더링이 일어나게 됨
그러면 API가 컴포넌트 함수 안에 있기 때문에 다시 HTTP 요청을 보내게 되고
그에 따라 또 값을 받아서 state가 바뀌는 식으로 무한 루프가 돌게 된다.
state는 그 이전의 값과 새로운 값을 비교하지 않고 바뀌면 무조건 리렌더링이 일어나니까!
