[React] useEffect (라이프사이클, Dependency array)

 

---

 

 

💡useEffect란?

- React에서 컴포넌트의 라이프사이클을 다루기 위한 대표적인 Hook이다.

- 생명 주기 별 특정 로직을 수행할 수 있도록 해준다.

- 전통적인 클래스형 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있게 해주는 Hook임

 

= 주기별 사이드 이펙트(side effect)를 제어한다.

 

 

 

* 리액트 라이프사이클 ( life-cycle )

: Mount(탄생)- Update(변화)- Unmount(죽음) 으로 구성

 

 

주기별 sideEffect 예시

 

---

 

 

 

아래의 예시 코드를 통해 useEffect를 정리해보자.

// App.jsx

import './App.css'
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import Even from './components/Even';
import {useState, useEffect, useRef } from 'react';

function App() {

  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");
  
  //false: 아직 이 컴포넌트는 마운트되지않았다 의미
  const isMount =useRef(false);

  
  // 1. 마운트: 탄생 (callback함수 만들고, deps에는 빈 배열 넣음)
  useEffect(()=>{
    console.log("mount");
  },[]);

  
  // 2. 업데이트: 변화, 리렌더링
  useEffect(()=>{
    if(!isMount.current){
      isMount.current= true;
      return;
    }
    console.log("update");
  });

  // 3. 언마운트: 죽음

  useEffect(()=>{
    console.log(`count: ${count}`);
    console.log(`input:${input}`);
  },[count,input])

  const onClickButton = (value)=>{
    setCount(count + value);
  };
  
  return (
    <div className ="App">
    <h1>Simple Counter</h1>
    <section>
      <input value={input} onChange={(e)=>{
        setInput(e.target.value);
      }}/>
    </section>
    <section>
      <Viewer count={count}/>
      {count %2===0 ? <Even/> : null}
    </section>
    <section>
      <Controller onClickButton={onClickButton}/>
    </section>
    </div>
  );
}

export default App;

 

// Even.jsx

import {useEffect} from "react";

const Even =() =>{
    
    useEffect(()=>{

        // 클린업(정리함수)
        // mount 될때 실행, amount될때 종료되면 정리함수 호출됨!
        return () =>{
            console.log("unmount");
        };

    },[]);

    return <div>짝수입니다</div>;
};

export default Even;

 

 

 

 

 

⚙️마운트 시점:  컴포넌트가 처음 화면에 나타날 때

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

 

위 코드는 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

*dependency array를 빈 배열([])로 주었기 때문이다.

→ 빈 배열을 주면, 해당 useEffect는 오직 처음 렌더링될 때만 실행된다.

주로 API 호출, 초기 세팅 등에 사용된다.

 

 

 

 

💡Dependency array란?

= (deps ,  의존성 배열)

- useEffect 에서 언제 effect 함수가 실행될 지를 제어하는 역할을 한다.

→ 어떤 상태나 props가 변경될 때만 effect가 실행되게 하고 싶을 때 사용함.

 

🌟 useEffect는 기본적으로 모든 렌더링마다 실행됨으로,

의존성 배열을 사용하여 배열 안에 있는 값들이 변경될 때만 useEffect가 실행되도록 제한할 수 있다.

 

 

 

 

 

 

⚙️업데이트 시점 : 1. 특정 값이 바뀔 때

useEffect(() => {
  console.log(`count: ${count}`);
  console.log(`input: ${input}`);
}, [count, input]);

 

이 코드는 count 또는 input 값이 변경될 때마다 실행되고 있다.

→ dependency array에 들어간 변수들이 바뀌면, 그에 따라 해당 useEffect도 다시 실행된다.

이를 통해 특정 상태(state)가 바뀌었을 때 로직을 분리하여 수행할 수 있으며, 무분별한 리렌더링을 방지할 수 있다.

이처럼 useEffect는 선택적으로 리렌더링 로직을 실행할 수 있도록 도와준다.

 

 

 

⚙️업데이트 시점 : 2. 조건추가

const isMount = useRef(false);

useEffect(() => {
  if (!isMount.current) {
    isMount.current = true;
    return;
  }
  console.log("update");
});

 

위 코드는 모든 렌더링마다 실행되지만, 처음 마운트 시점에는 실행을 막기 위해 useRef를 사용했다.

isMount라는 ref 객체를 만들어서 처음엔 false로 설정하고, 마운트 이후부터만 console.log("update")가 찍히도록 처리하였다.

useRef hook을 활용해서 일반적인 마운트/업데이트 구분이 필요한 상황에서 유용하게 사용할 수 있다.

 

 

 

 

⚙️언마운트 시점: 컴포넌트가 사라질 때

useEffect(() => {
  return () => {
    console.log("unmount");
  };
}, []);

이 코드는 Even 컴포넌트에서 사용되었으며, 해당 컴포넌트가 화면에서 제거될 때 콘솔에 "unmount"를 출력한다.

useEffect의 return 구문은 *클린업 함수로서, 컴포넌트가 사라질 때 정리 작업을 수행할 수 있도록 해준다.

(예를 들어, 이벤트 리스너 제거, 타이머 정리, 메모리 해제 등을 이렇게 구현할 수있다.)

 

 

 

 

💡클린업 함수(clean-up function) 이란?

- 컴포넌트가 언마운트되거나(= 화면에서 사라지거나), effect가 다시 실행되기 직전에 수행되는 정리 작업

→ 불필요한 동작 중단을 위해 사용

useEffect(() => {
  // effect 실행 로직
  console.log("Effect 실행");

  return () => {
    // 클린업 함수
    console.log("Effect 정리");
  };
}, [의존성 배열]);

 

 

 

 

---

 

 

 

렌더링되는 화면

처음 mount될 때를 제외하곤 update를 출력하고 있음을 확인할 수 있다.

 

 

 

---

 

 

💡정리

  

실행 시점	코드 예시	설명
Mount	useEffect(() => {}, [])	처음 렌더링될 때 한 번만 실행
Update	useEffect(() => {}, [dep])	특정 값(dep)이 바뀔 때마다 실행
Unmount	useEffect(() => return () => {}, [])	컴포넌트가 사라질 때(clean-up) 실행
무조건 실행	useEffect(() => {})	모든 렌더링마다 실행(의존성 배열 없음)

 

React에서 useEffect는 단순한 사이드 이펙트 처리 도구가 아니라, 컴포넌트의 라이프사이클을 세밀하게 제어할 수 있는 강력한 도구이다.

특히 dependency array의 활용은 리렌더링 최적화와 유지보수성 측면에서 필수적인 개념이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*Ref

https://ko.react.dev/reference/react/useEffect

useEffect – React

 

 

 

설명이 부족한 부분이나 피드백은 댓글로 남겨주세요!

감사합니다 ☺️