React hooks - useEffect

jiny·2022년 9월 5일

React React Component React Hooks component hooks lifecycle useEffect

React hooks

목록 보기

2/6

컴포넌트의 LifeCycle

React에서 컴포넌트의 LifeCycle은 크게 3가지로 구분

Mount - 브라우저에서 컴포넌트가 처음 렌더링 될 때 실행
update - 브라우저에서 컴포넌트가 재 렌더링 될 때 실행
Unmount - 컴포넌트가 브라우저에서 사라졌을 때 실행

useEffect

useEffect?

Mount -> Unmount 중 특정 주기에 해당될 경우 실행되는 함수

useEffect의 인자

콜백 함수
dependency array(option)

아주 간단한 예시

import { useEffect } from 'React'

useEffect(() => {
	console.log("안녕");
});

useEffect의 인자 안에 콜백함수를 추가

useEffect -> mount

app.tsx

import { useEffect, useState } from "react";

function App() {

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

  useEffect(() => {
    console.log("안녕");
  })

  const handleTriggerAction = () => {
    setCount(count + 1)
  };

  return (
    <>
    {count}
    <button onClick={handleTriggerAction}>click</button>
    </>
  );
}

export default App;

예상

useEffect에 dependency Array를 넣지 않았기 때문에 브라우저에 컴포넌트가 mount시 "안녕"이 console에 출력
click Event가 실행 되면 컴포넌트를 재 렌더링 시키기 때문에 렌더링 마다 useEffect가 실행되어 console에 출력될 것

실행 결과

우선 "안녕"이 출력되었다. (2번 출력되는 건 strict mode라서 그런 것)

2번 클릭 했으니 클릭 이벤트마다 컴포넌트가 재 렌더링이 발생하여 useEffect 함수가 실행되었고 콘솔에 2번 출력 된 것

useEffect -> mount(2)

  useEffect(() => {
    console.log("안녕");
  },[])

dependency Arr를 빈 배열로 추가 할 경우 브라우저에 마운트 된 후 최초 1번만 실행

실행 결과

최초 마운트시에 useEffect에 의해 "안녕"이 출력되었다.

Click Event(Action)이 발생했음에도 useEffect 함수가 실행되지 않은 것을 확인

useEffect -> update

dependency array에 특정 state를 추가할 경우 state value가 변할 때 마다 useEffect 함수가 실행

app.tsx

import React, { useEffect, useState } from "react";

function App() {

  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    console.log("카운트 update 되는 중");
  },[count]);

  useEffect(() => {
    console.log("input에 update 되는 중");
  },[inputValue]);

  const handleTriggerAction = () => {
    setCount(count + 1);
  };

  const handleInputAction = (e:React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.currentTarget.value);
  }

  return (
  	<>
      <span>count : {count}</span>
      <button onClick={handleTriggerAction}>click</button>
      <span>inputValue : {inputValue}</span>
      <input type="text" value={inputValue} onChange={handleInputAction}/>
    </>
  );
}

export default App;

예상

브라우저에 app 컴포넌트가 mount 될 경우 두 useEffect 함수가 실행되어 console에 출력
만약 버튼을 클릭한다면 count state가 변경되기 때문에 console에 "카운트 update 되는 중" 만 출력
만약 input에 입력한다면 inputValue state가 변경되어 console에 "input에 update 되는 중" 이 출력

실행 결과

마찬가지로 브라우저에 컴포넌트가 mount 되어 console에 출력

button을 클릭 시 첫 번째 useEffect 함수만 실행되어 console에 "카운트 update 되는 중"이 출력

input에 입력 시 입력 할 때마다 console에 두 번째 useEffect 함수만 실행되어 console에 출력

React -> unMount(clean up function)

  useEffect(() => {
    return () => {
      console.log("unMount 됬어용")
    }
  });

useEffect 콜백 함수안에 return + 콜백함수를 추가하면 브라우저에 해당 컴포넌트가 unMount될 경우 clean up function 실행
또한, useEffect가 먼저 실행 되기 전에 실행되는 함수이기도 함

Timer.tsx

import { useEffect } from "react"

const Timer = () => {

    useEffect(() => {
        const timer = setInterval(() => {
            console.log("타이머 돌아가는 중..");
        }, 1000);

        return () => {
            clearInterval(timer);
        }
    },[]);

    
    return (
        <div>타이머 돌아가는 중</div>
    )
}

export default Timer;

app 컴포넌트에 있는 버튼을 누르면 타이머 실행
버튼을 한 번더 누르면 cleanup function이 실행되어 timer 초기화

app.tsx

import { useState } from "react";
import Timer from "./component/Timer";

function App() {

  const [timerState, setTimerState] = useState(false);

  const handleTimerAction = () => {
    setTimerState(!timerState);
  }

  return (
    <>
      {timerState && <Timer/>}
      <button onClick={handleTimerAction}>timer trigger</button>
    </>
  );
}

export default App;