useEffect  말 그대로 Effect를 사용하겠다는 뜻의 Hook 입니다.

• 화면에 보일 수 있는 데이터를 서버에서 받아올 때
• 'state' 가 바뀔 때마다 함수를 실행 시키거나 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있습니다.

🚀 학습 목표

1. useEffect()훅을 활용해 다양한 Side Effect(부수효과)를 일으킬 수 있다.
2. React에서 일어나는 UI Rendering과 Side Effect(부수 효과)의 차이를 구분하여 설명할 수 있다.
3. useEffect Hook을 활용해 원하는 타이밍 = state 가 변경됐을 때 (의존성 배열)에 Side Effect(부수 효과)를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다.

1. Side Effect

1-1. Rendering in React

• 컴포넌트는 재사용이 가능한 UI 단위고, 컴포넌트의 렌더링은 해당 컴포넌트가 그려지는 것, state 와 props 를 기반으로 UI 요소를 그려내는 행위 입니다.
• 렌더링 결과물에 영향을 주는 요소는 state와 props 입니다.

1-2. Side Effect

• 아래의 인용처럼 함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에 Side Effect(부수효과)가 있다고 표현합니다.
• 위의 예제는 맨 아래 경우를 제외하곤 함수 안에 input - output 만 존재하지 않고, 실행하는 중간에 console.log 라던지, 함수 외부에 있는 변수를 조작하고 있습니다. 이는 함수의 결과값 이외에 다른 상태를 변경시키는 행위이므로 Side Effect 가 존재하는 것입니다.
• Side Effect는 함수 컴포넌트에서도 일어날 수 있습니다. 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위를 말합니다. 즉, 렌더링이 아니고 외부 세계에 영향을 주는 어떤 행위 입니다.

2. useEffect = Side Effect 를 활용하겠다

2-1. useEffect

• side Effect들을 함수의 body 자리에서 실행시키게 되면, 매 렌더링 때 마다 함수 body에 있는 해당 로직이 실행된다는 뜻입니다. 또한, side Effect는 렌더링 해줘야 하는 것과 무관한 로직들이 실행되기 때문에 렌더링 자체에 영향을 줘서 성능에 악영향을 미칠 수 있습니다.

1. render block
   위에서 아래로 렌더링 되기 때문에 side Effect로 인해 처음부터 다시 읽어 렌더링 속도가 느려짐

2. 항상 실행된다는 문제
   state 가 변할 때 다시 렌더링이 되는데, 그때마다 side Effect가 찍힙니다

• 따라서 이런 side Effect를 일으키기 적절한 장소로 useEffect Hook을 제공합니다. 즉 렌더링 이외에 일으켜야 하는 side Effect를 일으킬 탈출구로 useEffecct를 사용해야 합니다.

• useEffect() 는 side Effect를 렌더링 이후에 발생시킵니다.
  useEffect가 수행되는 시전엔 이미 DOM이 업데이트 되었고, side Effect가 렌더링에 영향을 주지 않도록 설계되어 있습니다.

• 함수 컴포넌트는 최신 state와 props를 반영한 화면을 리턴하게 되는데, 이때 Effect를 일으킬 타이밍은 useEffect의 두번째 인자인 의존성 배열useEffect 를 사용하여 console.log("effect")의 render block 을 막고,
  [] 비어있는 의존성 배열을 통해 더이상 실행되지 않는 것을 볼 수 있다.

• ex) 의존성 배열
  Count up 버튼을 눌렀을 때 console 창에 찍히는 것은 다음과 같습니다.
  마찬가지로 Count down 버튼을 누르면 0, 3 이 찍히겠죠?

• 의존성 배열 안에는 여러개를 넣을 수 있습니다.
  위의 의존성 배열 안에 count, minus 두개의 state 를 넣고,Count up 버튼을 눌러보면 아래와 같이 콘솔창에 찍히는 것을 볼 수 있습니다.

• 서버에서 데이터를 받아오는 것도 side Effect 입니다.
  서버에서 데이터를 받아오는 함수를 fetch() 라고 합니다.이 함수를 써서 이 함수의 서버에 요청을 하고 거기서 받아온 data를 state 값에 넣고, 그 state를 return() 아래에 사용하여 이를 렌더링 해주는 로직으로 구현하게 됩니다. 어쨌든 데이터를 서버에서 받아올 때 매번 호출을 할 수 없으니까, 처음 컴포넌트가 렌더가 될 때 사용하겠다는 의미로 위와 같은 형태로 가장 많이 쓰이게 됩니다.

3. Clean up Effect

3-1. Render -> Effect Callback -> Clean up!

• 이전에 일으킨 side Effect 를 정리할 필요가 있을 때 사용합니다.
• ex) setInterval() 이란 함수 안의 console이 1초에 한번씩 찍히고 있습니다. 이때 다음 페이지로 넘어가면 해당 setInterval() 함수의 기능을 멈추게 하고 싶다면, clean up Effect를 활용하여 정리를 해줍니다.