리액트의 Main job
- UI 렌더링 & 사용자의 input에 반응하여 UI 리렌더링하는것
- 유저가 렌더링된 UI와 상호작용(interact)할 수 있게 하고 그 상호작용을 통해 발생하는 이벤트에 의해 state(데이터)가 변경되면 컴포넌트를 다시 리렌더링 하는 작업
리액트에서의 side effect/Effect란?
Main job과 관련된 것 이외의 모든 것
→ http 요청, 로컬스토리지에 데이터 저장하기, interval, timers etc..
이 side effect 들은 화면에 무언가를 그리는 것과 직접적인 연관은 없다.
단순히 http 요청하고 에러핸들링 하는것은 UI 렌더링과 긴밀히 연관되어 있지는 않다.
useEffect를 언제 사용하나?
리액트로 external system(리액트가 control 하지 않는 외부 시스템)에 접근할 때 사용한다.
ex) browser DOM API, 외부 라이브러리나 API 사용할때
http 요청의 경우
리액트 컴포넌트는 기본적으로 데이터(state)가 업데이트되면 자동으로 리렌더링 되는데 http 요청하고 응답으로 받은 값을 state에 저장하는 함수가 있다고 가정할때 이 함수를 컴포넌트 내에 직접 호출하게 되면 무한루프에 빠지게 된다.(state 업데이트 후 리렌더링되면 또 함수 호출하고 http 요청 날리고.. http 요청을 무한으로 계속 날리게 됨)
이를 해결하는 방법으로 useEffect 훅을 사용할 수 있다.
useEffect 동작 방식
- 컴포넌트가 최초 마운트 됐을때 실행
- dependencies가 업데이트되고 리렌더링될 때
- 컴포넌트 언마운트 될 때 cleanup 함수 실행
리액트 개발 모드일때 왜 콘솔이 두번 찍힐까?
- 개발모드 일때는 리액트가 자동으로 컴포넌트를 리마운트한다. (즉 컴포넌트가 두번연속 마운트됨)
- cleanup이 필요한 effect를 쉽게 발견할수있도록 하기위해(디버깅 용이하게 하기 위해서)
- Effect 로직이 올바르게 짜였는지 확인하기 위한 일종의 stress test
얼레벌레 프론트엔드 개발자