UseEffect

Side Effect란?

번역 : 부작용 또는 부수효과

함수의 부작용 이란 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과
ex) 함수의 목적인 Input을 받아서 output을 산출하는 것 이외의 모든 행위

• 외부의 상태를 읽어오기
  함수 내부의 값이 아닌 외부의 값(변수, 함수, 객체 등등)을 읽어오는 행위
• 외부의 상태를 변경시키기
  함수가 함수 내부에 있는 값이 아닌, 외부의 값(변수, 객체 등등)을 변경

프론트엔드에서 side Effect 사용 사례

Data Fetching, DOM 접근 및 조작, 구독 등의 행위가 있다.

useEffect

react에 함수컴포넌트 내에서 side Effect를 발생시키면 두 가지 문제가 발생한다.

1. side effect가 렌더링을 blocking 한다.
   함수 컴포넌트의 return(html)이 보여지기 전에 side Effect동작이 실행된다.(사이트가 멈춰있다)

2. 매 렌더링마다 side effect가 수행된다.
   UI 업데이트가 발생할 때마다 매번 side Effect동작이 실행된다.

   =>

   1. 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다.
   2. 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수 있어야 한다.

useEffect 사용법

useEffect는 React에서 side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 hook이다.

import { useEffect } from 'react'

// 사용법
useEffect(콜백 함수, 의존성 배열);

// 1. 의존성 배열이 전달되지 않았으므로 ⭐️매 렌더링⭐️마다 side effect가 실행된다
useEffect(() => {
  // side effect
});

// 2. 첫 번째 렌더링 이후에 side effect를 실행하고
// 그 이후에는 ⭐️value 값이 변했을 때만⭐️ 실행한다.
useEffect(() => {
  // side effect
}, [value]);

// 3. 첫 번째 렌더링 이후에 side effect를 실행하고
// 그 이후에는 ⭐️value1, value2 중 하나라도 변하면⭐️ side effect를 실행한다.
useEffect(() => {
  // side effect
}, [value1, value2]);

//4.첫 번째 랜더링 이후에 side effect를 실행하고
// 그 이후에는 실행하지 않는다. 의존성배열은 선언했지만 값이 없기 때문
useEffect(() => {
  // data fetching side effect
}, []);

함수 컴포넌트의 렌더링과 useEffect가 발생하는 과정

1. 컴포넌트가 렌더링 된다.
   (최초로 진행되는 렌더링은 브라우저에 처음으로 이 컴포넌트가 보였다는 의미로 mount 라고 표현합니다.)

2. useEffect 첫 번째 인자로 넘겨준 콜백 함수가 호출된다. (Side Effect)

3. 컴포넌트의 state 또는 props가 변경되었을 경우 리렌더링이 발생한다. (update)

4. useEffect는 두 번째 인자에 들어있는 의존성 배열을 확인한다

   • a. 만약 의존성 배열이 전달되지 않았거나 / 의존성 배열 내부의 값 중 이전 렌더링과 비교했을 때 변경된 값이 하나라도 있다면 첫 번째 인자로 넘겨준 콜백 함수가 호출된다. (Side Effect)
   • b. 의존성 배열 내부의 값 중 이전 렌더링과 비교했을 때 변경된 값이 없다면 콜백 함수를 호출하지 않는다.
   • c. state 또는 props가 변경된다면 3~4의 과정을 반복

5. 컴포넌트가 더 이상 필요 없어지면 화면에서 사라진다.

   (컴포넌트가 브라우저의 화면에서 사라졌다는 의미로 unmount라고 표현합니다.)

Clean Up Effect

side Effect가 페이지 이동 후에도 계속 남아있다면 side effect를 clean up 해줘야 한다.

• Clean Up 방법
  useEffect에 전달한 콜백 함수에서 clean up을 하는 함수를 리턴하면 된다.