[TIL] React 함수형 컴포넌트의 useEffect와 친해지기

오늘은 useEffect에 대한 공부를 해보려고 합니다.
useState는 계속 사용하게 되니 친해지는 감도 있고 구조와 원리도 익숙해지고 있습니다.
하지만 useEffect는 life-cycle과 연관되어 있다보니 자주 다루지 않기도 하기 때문에 아직 어렵습니다.

---

Effect Hook

• Effect Hook은 React Class의 componentDidMount / componentDidUpdate / componentWillUnmount와 같은 목적으로 제공되는 하나의 API라고 생각할 수 있다.
• 사용할 때에는 useEffect(() => {}, [count])처럼 사용한다.
• 의존성 배열을 받는 이유?
  • React hook 함수들은 불필요한 작업을 줄이기 위해서 두 번째 인자로, 첫 번째 함수가 의존해야하는 배열을 받는다.
  • 의존성 배열을 사용할 때, 주의깊게 사용해야 한다. useEffect는 무한루프를 발생시킬 수 있다.

무한 루프?

• 무한 루프란 useEffect안에서 state를 변경하는 함수를 실행하게 되면 시점이 정해지지 않은 setState는 계속해서 state를 변경시킨다. 그러므로 멈추지않고 함수를 실행하게 된다.
• 이러한 무한루프를 방지하기 위해서는 state를 변경하는 함수를 포함할 때,
  • 반드시 해당 state를 의존성배열에 넣어줘야 한다.

Effect Hook은 어떻게 작동하는가?

**첫번쨰**
useEffect(() => {
  console.log(CDM + CDU)
}) // 의존성 배열이 없음으로 매 render 마다 useEffect안에 있는 함수가 실행된다

**두번째**
useEffect(() => {
  console.log(CDM)
  return () => console.log(CWU)
}, []) // 두번째 인자인 의존성 배열이 비어있음으로 CDM때 한번 실행되고 이후로는 실행되지 않음
	   // 하지만 위처럼 return 하여 콜백함수로 실행하면 CWU일때, 실행된다

**세번째**
useEffect(() => {
  console.log(CDM)
  console.log(CDU) + shouldComponentUpdate
  return () => console.log(clean-up) 
}, [state]) // 의존성배열에 state가 들어오면 CDM때 실행되고
     	    // 컴포넌트가 업데이트될 때도 실행된다. 추가적으로 state에 변경이 감지될 때도 실행된다.
            // callback함수를 만들면 closure에 의해 과거의 값을 기억하는 함수가 실행된다. 
**데이터 fetch 할 때**
useEffect(() => {
  fetch(url)
}, [state]) // 의존성 배열에 state가 있으면 fetch해온 data가 state가 변경될 때마다 실행된다
     	    // 그렇다면 받아오는 데이터 값이 변경되어야 할 때, 사용하면 좋다. (filter, search)

여기서 다시 살펴보는 React Life-Cycle!!

• Life-cycle을 복습함으로써 useEffect가 작동하는 방식과 과정을 다시한번 이해해보자.

Clean-Up 함수

• useEffect의 추가적인 기능 중에는 Clean-Up 함수가 잇다.
• 위에서 설명했듯이 의존성 배열에 state가 있을 때, 콜백함수로 함수를 실행하게 되면 업데이트 되기 이전의 값을 가진 함수를 볼 수 있다.
• callback 함수로 실행된 값은 setState에 의해 변하지 않고 그대로 존재한다.
  • 이를 통해서 이펙트가 호출되기 전과 컴포넌트가 언마운트될 때 호출되면서 이전 이펙트로 인한 결과를 정리한다.
  • 이는 일반적으로는 사용되지 않지만 effect가 실행될 시점에 렌더가 완료되어 있음을 보장할 수 있다.
  • 눈으로 확인 하긴 어렵지만 확실한 마무리가 필요한 작업을 수행할 때 활용한다.