[리액트] use Effect

💡 useEffect는 컴포넌트 렌더링, 의존성 배열 변화시 특정 동작을 수행하는 hook이다.

use Effect의 문제점

함수 컴포넌트 본문에서 바로 side Effect가 발생하면 2가지 문제점이 존재한다.

• side Effect가 렌더링을 블락킹한다.
  만약 시간이 많이 소요되는 함수가 있다면 그 함수의 실행이 종료 될 때 까지 jsx를 return하기 전 까지 렌더링 되지 않는다.

• 랜더링마다 side Effect가 수행된다.
  특정 side Effect는 매번 수행될 필요가 없다.

data fetching처럼 특정 상황에서만 사용되는 side Effect가 작은 기능 하나에 매번 리렌더링(함수 컴포넌트에선 다시 호출) 된 다면 굉장히 비효율적이다.

위의 2가지 문제를 해결하는 useEffect 라는 hook이 있다.

useEffect 사용법

렌더링을 블락킹 해결

1. use Effect를 사용하려면 import를 해야한다.
2. useEffect는 함수이며 인자로 콜백함수를 받는다.
3. 하나의 함수를 인자로 받고 렌더링이 끝나면 함수를 실행한다.

따라서 side Effect의 문제점인 렌더링을 블락킹 하지 않게 되었다.

랜더링마다 side Effect 수행 해결

• 렌더링 마다 side Effect가 발생하는 문제가 있다

1. useEffect는 인자로 콜백함수와 의존성 배열을 넣을 수 있다.
2. useEffect는 우선 의존성 배열의 값과 전 렌더링이 동일한지 검사한다.
3. 검사에 통과하면 함수가 실행되는데 처음엔 무조건 실행된다.

useEffect(콜백함수, [의존성 배열]) // 의존성 배열이기에 배열안에 넣어야 한다.

의존성 배열이 변하면 함수가 실행되고 변하지 않았다면 실행되지 않는다.ㅁ

useEffect(콜백함수, [A, B]) 

위처럼 의존성 배열에 두가지 값이 들어갈 수 있다. 두가지 값중 하나라도 변하면 함수가 실행 된다.
처음만 함수가 실행되고 그이후엔 실행되질 않기를 원하면 배열에 아무 값도 넣지 않으면 된다.

렌더링 과정시 useEffect

아래의 순서를 통해 useEffect가 렌더링 될 때 어떤 식으로 동작하는지 알 수 있다.

1. 컴포넌트가 렌더링 된다.(첫 렌더링을 mount라고 한다)
2. useEffect의 함수가 호출 된다.(sideEffect)
3. state, props가 변경 되면 리렌더링 된다.(update)
4. 의존성 배열을 검사한다.
5. state혹은 props가 변경되면 3~4번이 반복 된다.
6. 컴포넌트가 필요 없어지면 화면에서 사라진다.(unmount)

마치며

useEffect를 통해 특정 기능이 동작할 때 다른 함수까지 동작하는 불필요한 렌더링을 최소화해 효율성을 높힐 수 있다. 또한 더이상 큰 크기의 sideEffect로 jsx 렌더링을 방해하지 않을 수 있다.
아직 정확히 언제 써야할지는 감이 안오지만 사용할 수 있는 상황이 오면 꼭 써봐야겠다.