useEffect

useEffect Hook을 사용하면 구성 요소에서 부작용을 수행할 수 있다.
부작용의 몇 가지 예는 데이터 가져오기, DOM 직접 업데이트 및 타이머이다.
useEffect는 두 개의 인수를 허용한다.

useEffect(function, dependency)

 // setTimeout() 초기 렌더링 후 1초를 계산하는데 사용
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

useEffect는 모든 렌더링에서 실행된다. 즉, 개수가 변경되면 렌더링이 발생하고 다른 효과가 트리거된다.
이때, 시기를 제어하는 몇 가지 방법이 있다.
배열을 허용하는 두 번째 매개변수[deps]를 항상 포함해야한다. useEffect는 선택적으로 이 배열에 종속성을 전달할 수 있다.

1. 빈 배열
- 처음 시작할 때 한번만 렌더링이 일어남
useEffect(() => {
	...
}, []);

2. 소품 또는 상태 값
- 처음 시작할 때 한번만 렌더링이 일어남
- deps가 변화할 때마다 렌더링이 일어남
useEffect(() => {
	...
}, [prop, state]);

효과 정리

일부 효과는 메모리 누수를 줄이기 위해 정리가 필요하다.
더 이상 필요하지 않은 시간 초과, 구독, 이벤트 리스너 및 기타 효과는 삭제해야 한다.
useEffect Hook의 끝에 return 함수를 포함하여 이를 수행한다.
retur을 함으로서, unmount 시킬 수 있다.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

클래스형 컴포넌트 생명주기 메소드 대체

훅이 나오기 전 리액트의 생명주기는 클래스형 컴포넌트의 생명주기 메소드를 사용하였다.

• componentDidMount, componentDidUpdate, componentWillUnmount
  하지만 훅이 나오면서 useEffect가 클래스형 컴포넌트의 생명주기 메소드를 대체하여 사용하고 있다.

클래스형 컴포넌트

mount

• componentDidmount
  컴포넌트를 처음 렌더링 한 후, 최초로 렌더링 되는 시점에 단 한 번만 실행된다.
• useEffect

	useEffect(() => {
    	consloe.log('componentDidmount')
    }, []);

update

• componentUpdate
  update는 pops, state, 부모 컴포넌트가 렌더링 될 때, 강제 함수로 렌더링 될 때 발생한다.
• useEffect

1. 아무런 state가 바뀔 때 마다 실행

	useEffect(() => {
    	console.log('componentDidUpdate')
    })

2. 특정 state가 바뀔 때 마다 실행

	useEffect(() => {
    	console.log('componentDidUpdate')
    }, [state, props])

unmount

• componentUnmount
  컴포넌트가 DOM에서 제거될 때 사용한다.
• useEffect
  return 함수가 componentUnmount 역할을 한다.
  useEffect()를 끈내며 실행하기 때문에 clean-up함수라고 부른다.

	useEffect(() => {
    	console.log('componentDidmount');
        return () => {
        	console.log('componentWillUnmount');
        }
    }, [])

정리하기

useEffect로 생명주기 이해하기

componentDidmount

useEffect의 의존성 배열에 빈 값 전달

componentUpdatemount

1. 변화될 때마다 업데이트 하기 => useEffect 의존성 배열 사용 안함(default = 모든 state)
2. 특정 state 변화될 때마다 업데이트 하기 => useEffect 의존성 배열에 특정 state, props 값 전달

componentWillUnmount

useEffect에 return 함수 사용(clean-up 함수)
deps를 사용하지 않으면 계속 사용되고 deps에 빈 값을 전달하면 끝날 때 단 한번 실행한다.