1. Side Effect
: 부수효과. 의도하지 않은 다른 동작
- 함수 내에서 모든 동작이 이루어지는 경우 => side effect 없다
- 함수 밖에서 값을 가져오는 경우 => side effect 있다
- console.log : 대표적인 side effect 중 하나 (외부의 method를 가져와 사용하기 때문)
2. useEffect
- useEffect(( ) => { }, [ ])
- 콜백 함수: 특정한 side effect 수행
- 의존성 배열: 실행시킬 타이밍
- useEffect 안의 함수는 랜더링 후 실행된다. ➡️ side effect가 랜더링 blocking 하는 문제 해결
- 의존성 배열이 비어있으면 최초 랜더링시에만 side effect 실행되고 그 다음부터는 실행되지 않는다. ➡️ 매 랜더링마다 side effect 실행되는 문제 해결 ( ex) Data Fetching 을 최초 한 번만 실행하면 될 경우에는 빈 배열 넘겨주어 최초 한 번만 data 가져오는 side effect 발생)
✏️ 전체 과정
- 컴포넌트 랜더링 (최초 랜더링: mount)
- callback 함수 호출 (side effect)
- state or props 변경 ➡️ 리랜더링 (update)
- 의존성 배열 확인
- 의존성 배열이 존재하지 않거나, 배열의 요소 중 하나라도 변경됐을 경우 ➡️ callback 함수 호출 (side effect)
- 의존성 배열의 변경이 없을 경우 ➡️ callback 함수 호출하지 않음
- state or props 변경 시 3-4번 반복
- 컴포넌트 불필요시 화면에서 사라짐 (unmount)
❗️ state의 변화는 해당 컴포넌트에만 영향을 미친다. (해당 컴포넌트만 다시 랜더링이 일어남) ➡️ 자식 컴포넌트에서 변화가 일어나면 자식 컴포넌트만 리랜더링 되고, 부모 컴포넌트에서 변화가 일어나면 부모, 자식 컴포넌트 모두 리랜더링 된다.
3. Clean up Effect
: side effect 가 지속적으로 남아있는 경우
- useEffect 에 전달한 callback 함수에서 clean up 함수 리턴
- 다음 side effect 발생시키기 전 / 컴포넌트 unmount 될 때 clean up 함수 호출한다.
Hello