useEffect: 컴포넌트의 사이드 이펙트(Side Effect)를 제어하는 React Hook

 

 

 

 

📌 useEffect 

: 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

• 컴포넌트의 사이드 이펙트(Side Effect)를 제어하는 React Hook
• 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것

 

 

✨ 사이트 이펙트 (Side Effect) 

: 부수적인 효과, 파생되는 효과 (= 어떠한 동작에 따라 발생하는 효과)

 

 

 

---

 

 

📌 useEffect 구조

useEffect ( function, [deps] )

• function:  실행하고자 하는 콜백 함수
• deps: 의존성 배열 (검사하고자 하는 특정 값 배열)

👉 두 번째 인수로 전달한 배열[ ]의 값이 변경되면, SideEffect가 발생하여 첫 번째 인수로 전달한 콜백 함수를 실행시킨다.

 

 

 

✨ 의존성 배열 (Dependency array, deps)

: useEffect의 두 번째 인자로 오는 배열

• deps(의존성 배열)에는 값을 여러 개 넣을 수 있다.
  useEffect( function, [ A, B ] )

 

출력 결과

 

 

 

---

 

 

📌 useEffect로 라이프 사이클(LifeCycle) 제어하기

 

 

 

📍useEffect 함수 불러오기

import React, { useEffect } from 'react';

 

 

 

 

 

📌 Mount(탄생) 제어하기

useEffect ( function, [ ] )

• deps[ ]를 빈 배열로 두기
  👉 deps[ ]의 값이 변경되어야 콜백 함수가 실행되기 때문에 컴퍼넌트가 처음 mount되었을 때(최초) 이후에는 다시는 실행되지 않는다.

  useEffect(() => {
    console.log('Mount');
  }, []);

 

 

 

 

 

📌 Update(변화) 제어하기

useEffect ( function )

• deps[ ] 생략하기
  👉 mount 되었을 때 한 번 실행된 다음, 컴퍼넌트가 리 렌더링(업데이트) 될 때마다 실행된다.
• 특정 props, state가 바뀔 때 실행 

  useEffect(() => {
    console.log(name);
    console.log('업데이트 될 때 실행된다');
  }, [name]);

 

 

 

 

🔺 mount 시점을 제외하고 업데이트 되는 순간에만 콜백 함수를 실행하기

 

1. App 컴포넌트가 mount 되었는지를 체크하는 변수를 useRef를 이용해서 생성한다.

2. 현재 mount가 실행되어 isMount가 true면

3. isMount 값을 true로 변경하고

4. 강제종료

 

👉 mount 된 시점은 X, 업데이트 되는 순간에만 콜백 함수가 실행된다.

 

 

 

 

 

 

 

 

📌 UnMount(죽음) 제어하기

 

🔺 클린업 (정리함수)

: useEffect의 콜백 함수가 반환하는 함수

• UnMount가 되면 정리함수를 호출한다.
  (= useEffect가 끝날 때 실행)

 

• 값이 홀수가 되면 Even(짝수) 함수는 UnMount 되고 정리 함수가 실행된다.

출력 결과

 

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트

 

React Hooks : useEffect() 함수