side effect
리액트의 main job: render UI & React to User Input
UI를 렌더링하고 user Input으로 데이터를 받고 필요하면 다시 UI를 렌더링하는 과정
EX)useState(), Hook, Props 등등..
side effect란 main job을 제외한 일을 말하는데 예를 들어
- 브라우저 저장소에 데이터를 저장
- 백엔드에 Http requests를 보냄
- 타이머/인터벌를 설정하고 관리
side effect의 function은 컴포넌트에 직접적으로 연결되면 안된다.
버그를 유발시킬 수 있다.
예를 들어 컴포넌트가 계속 렌더링 되면서 무한로딩이나 너무 많은 Http request를 보낼 수 있다
useEffect()
이를 다루기 위해 react의 특별한 Hook이 있는데 이를 useEffect()라고 한다.
useEffect(()=>{...}, [dependencies])
첫번째 인자 = 함수
- 모든 컴포넌트가 평가된 후 실행됨
두번째 인자 = dependecies
- 특정한 dependencies가 바뀌면
첫번째 인자인 함수가 실행됨
🌞