useEffect

1. useEffect란?

useEffect는 애플리케이션 내 컴포넌트의 여러 값을 활용해 동기적으로 부수 효과를 만드는 매커니즘이며 이 부수 효과가 언제 일어나는지보다 어떤 상태값과 함께 실행 되는지 살펴보는 것이 중요

2. useEffect 형태

useEffect(() => {
//do something
}, [props, state])
}

• 첫번째 인수: useEffect가 실행할 부수 효과가 포함된 함수로 렌더링될 떄마다 실행(callback함수)
• 두번째 인수: 의존성 배열로 의본성 배열 요소의 안에 값이 바뀔때 실행

3. useEffect의 작동 원리

함수형 컴포넌트는 렌더링 시마다 고유의 state와 props 값을 가지며, 함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행한다.
이때 useEffect는
렌더링할 떄마다 의존성에 있는 값을 보면서 이 의존성의 값이 이전과 다른 게 하나라도 있으면 부수 효과를 일으키는 평범한 함수이다.
즉, useEffect는 state와 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수이다.

4. 클린업 함수

클린업 함수는 useEffect내에서 반환(return 값의 함수)되는 함수이다.
클린업 함수는 새로운 값과 함께 렌더링된 뒤에 실행되며,
새로운 값을 기반으로 렌더링 뒤에 실행되지만
이 변경된 값을 읽는 게 아니라 함수가 정의됐을 당시에 선언됐던 이전 값을 보고 실행한다.

다음의 예시는 렌더링이 수행될 때마다 counter가 어떤 값으로 선언돼 있는지 분명히 보여준다.

useEffect(() => {
  function addMouseEvent() {
    console.log(1)
  }
  window.addEventListener('click', addMouseEvent)

return () => {
  console.log('클린업 함수 실행!', 1)
  window.removeEventListner('click', addMouseEVENT)
	}
}, [counter])

useEffect(() => {
  function addMouseEvent() {
    console.log(2)
  }
  window.addEventListener('click', addMouseEvent)

return () => {
  console.log('클린업 함수 실행!', 2)
  window.removeEventListner('click', addMouseEVENT)
	}
}, [counter])

함수형 컴포넌트의 sueEffect는 그 콜백이 실행될 때마다
이전의 클린업 함수가 존재한다면, 그 클린업 함수를 실행한 뒤에 콜백을 실행한다.
따라서 이벤트를 추가하기 전에 이전에 등록했던 이벤트 핸들러를 삭제하는 코드를 클린업 함수에 추가하는 것이다.
따라서 특정 이벤트의 핸들러가 무한히 추가되는 것이다.

따라서 클린업 함수는
언마운트가 아닌,
함수형 컴포넌트가 리렌더링됐을 때 의존성 변화가 있었을 당시 이전의 값을 기준으로 실행되는 말, 그대로 이전 상태를 청소해 주느 개념이다.

5. 의존성 배열

의존성 배열이 빈 배열이라면, useEffect는 비교할 의존성이 없다고 판단해 최초 렌더링 직후에 실행된 다음부터는 더 이상 실행되지 않는다.
아무런 값이 없다면 의존성을 비교할 필요 없이 렌더링할 때마다 실행이 필요하다고 판단해 렌더링이 발생할 때마다 살행된다.
즉, useEffect의 effect는 컴포넌트 사이드 이펙트,
즉 부수 효과를 의미한다.
따라서 useEffect는
컴포넌트가 렌더링된 후에 어떠한 부수 효과를 일으키고 싶을 떄 사용하는 훅이다.

이전 의존성 배여로가 현재 의존성 배열의 값에 하나라도 변경 사항이 있다면,
callback으로 선언한 부수 효과를 실행한다.

6. useEffect 사용시 주의 점

6.1 eslint-disable-line reacthooks/exhaustive-deps

빈 배열을 의존성으로 할 때, 컴포넌트를 마운트하는 시점에만 무언가를 하고 싶다라는 의도로 작성을 할 때 나타나는 주석이다.
useEffect는 반드시 의존성 배열로 전달한 값의 변경에 의해 실행돼야 하는 훅이다.
그러나, 의존성 배열을 넘기지 않은 채 콜백 함수 내부에서 특정 값을 사용한다는 것은, 부수 효과가 실제로 관찰해서 실행돼야 하는 값과는 별개로 작동한다.
즉, 컴포넌트의 state, props와 가틍ㄴ 어떤 값의 변경과 부수 효과가 별개로 작동하게 된다.

6.2 첫번째 인수에 함수명을 부여하기

useEffect 코드가 복잡하고 많아질수록 무슨 일을 하는 useEffect코드인지 알기 힘들어진다. 따라서, 적절한 이름을 사용한 함수로 바꾸는 것이 좋다.

6.3 거대한 useEffect 금지

부수 효과의 크기가 커질수록 애플리케이션 성능에 악영향을 미치며, useEffect가 컴포넌트의 렌더링 이후에 실해되기 때문에 렌더링 작업에는 영향을 적게 미치지만, 여전히 자바스크립트 실행 성능에 영향을 미치게 된다.
따라서 간결하고 가볍게 유지하는 것이 좋다.
만약, 의존성 배열이 길어진다면,
적은 의존성 배열을 사용하도록 분리하는 게 좋다.