[React] useEffect

SuJeong·2022년 11월 7일
0

React

목록 보기
8/9

1. useEffect란?

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

useEffect(콜백 함수, 의존성 배열)

  • 콜백함수 : 특정한 side effect를 수행
  • 의존성 배열 : 렌더링 시 useEffect를 실행할 조건

2. 의존성 배열에 따른 useEffect 발생

import { useEffect } from 'react'

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

// 1번
useEffect(() => {
 // side effect
});

// 2번
useEffect(() => {
 // side effect
}, [value]);

// 3번
useEffect(() => {
 // side effect
}, [value1, value2]);
  1. 의존성 배열이 전달되지 않았으므로 매 렌더링마다 side effect가 실행된다
  2. 첫 번째 렌더링 이후에 side effect를 실행하고 그 이후에는 value 값이 변했을 때만 실행한다.
  3. 첫 번째 렌더링 이후에 side effect를 실행하고 그 이후에는 value1, value2 중 하나라도 변하면 side effect를 실행한다.

3. 컴포넌트 렌더링에 따른 useEffect 렌더링 과정

  1. 컴포넌트가 최초로 렌더링 -> mount
  2. useEffect의 콜백함수 실행
  3. 컴포넌트의 state, props가 업데이트 되었을 경우 리렌더링 발생 -> updated
  4. useEffect의 의존성 배열 확인
  • 의존성배열 값이 없는 경우 : 최초 렌더링 시에만 호출하므로 콜백함수가 실행되지 않는다.
  • 의존성배열 값이 변경된 경우 : 콜백함수를 호출한다.
  • 의존성배열 값이 변경되지 않은 경우 : 콜백함수 호출하지 않는다.
  1. 컴포넌트 간 이동하거나 필요없으면 화면에서 사라짐 -> unmount

4. clean up

컴포넌트가 unmount 시에도 해당 콜백함수가 계속 실행되고 있다면 효율성이 떨어지기 때문에 clean up을 통해 종료시켜줘야한다.

useEffect(() => {
	// 콜백함수 실행
    // ...
    // clean up을 하는 함수를 return
    return;
})

clean up을 호출하는 경우

  1. 다음 side effect를 발생시키기 전
  2. 컴포넌트가 unmount 되었을 때

5. clean up 호출순서

import { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom";


const App = () => {
	const [count, setCount] = useState(0);
	const navigate = useNavigate();

	useEffect(() => {
    console.log("test1");                             // 1

    return () => {
      console.log("test2");                           // 2
    };
  }, [count]);

	console.log("test3");                               // 3

	return (
		<>
			<button onClick={()=>{setCount(count + 1)}}>숫자 증가</button>
			<button onClick={()=>{navigate('/main')}}>메인 페이지 이동</button>
		</>
	);
};

export default App;

App 컴포넌트가 마운트 된 순간부터 ‘숫자 증가’ 버튼을 한번 누르고 ‘메인 페이지 이동’ 버튼을 누를때 까지 console에 출력되는 메세지의 순서는?

  1. 컴포넌트 최초 mount시 'test3' 'test1' 가 차례로 출력
  2. '숫자 증가'버튼 클릭 시 setCount()에 의해 의존성 배열에 값인 count state가 변화했으므로 콜백 함수가 실행, 'test3' 'test1' 가 차례로 출력
  3. '메인 페이지 이동'버튼 클릭 시 unmount되어 컴포넌트가 사라졌으므로 clean up을 호출하여 'test2'가 출력
profile
Front-End Developer

0개의 댓글