[React Lifecycle] 컴포넌트는 언제 태어나고 사라질까?

728x90

React Lifecycle 

리액트 컴포넌트를 사용하다 보면 "언제 데이터를 불러와야 할까?", "언제 정리(clean-up)를 해야 할까?" 같은 고민이 생깁니다. 이럴 때 중요한 개념이 바로 컴포넌트의 라이프사이클(Lifecycle) 입니다. 이 글에서는 리액트 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 클래스형 컴포넌트와 함수형 컴포넌트(Hooks 사용) 관점에서 자세히 설명합니다.

 

---

1.  리액트 라이프사이클이란?

리액트 컴포넌트는 화면에 렌더링되는 동안 여러 가지 단계를 거칩니다. 이 일련의 과정이 라이프사이클이며, 크게 세 단계로 나뉩니다:

1. 마운트(Mount) : 컴포넌트가 DOM에 삽입될 때
2. 업데이트(Update) : 상태나 props가 바뀌어 컴포넌트가 다시 렌더링될 때
3. 언마운트(Unmount) : 컴포넌트가 DOM에서 제거될 때

 

---

2.  클래스형 컴포넌트의 라이프사이클 메서드

클래스형 컴포넌트에서는 라이프사이클을 다루기 위한 여러 메서드를 제공합니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    return <div>Hello</div>;
  }
}

주요 메서드 요약

단계	메서드	설명
Mount	constructor	초기 state 설정 및 메서드 바인딩
Mount	componentDidMount	초기 렌더링 후 한 번 실행, API 호출 등 적절
Update	componentDidUpdate	props/state 변화 후 실행
Unmount	componentWillUnmount	컴포넌트 제거 직전, 정리 작업 수행

 

 

---

3.  함수형 컴포넌트의 라이프사이클 (with Hooks)

함수형 컴포넌트에서는 useEffect 훅을 사용해 동일한 라이프사이클 단계를 다룰 수 있습니다.

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('componentDidMount');

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

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

  return <div>Hello</div>;
}

useEffect 훅 활용법

상황	코드 형태	의미
마운트 시	useEffect(() => { ... }, [])	초기 한 번 실행
업데이트 시	useEffect(() => { ... })	모든 렌더링마다 실행
특정 값 변화 시	useEffect(() => { ... }, [value])	value가 바뀔 때만 실행
언마운트 시	return () => { ... }	컴포넌트 제거 시 clean-up

 

---

4.  클래스형 vs 함수형 컴포넌트 라이프사이클 비교

측면	클래스형 컴포넌트	함수형 컴포넌트 (Hooks)
라이프사이클 메서드	명시적 메서드 제공 (componentDidMount 등)	useEffect로 통합 관리
가독성	복잡한 로직일수록 구조화 용이	효과가 많을 경우 관리 복잡도 증가 가능
사용 추천	구형 코드 유지보수 시	최신 프로젝트 권장 방식

 

---

5.  예제 - API 데이터 호출하기

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• useEffect 안에 비동기 API 호출됩니다.
• 빈 배열 []로 마운트 시 한 번만 호출

 

---

6.  마무리

• 리액트 라이프사이클은 마운트, 업데이트, 언마운트 단계로 나뉩니다.
• 클래스형 컴포넌트는 각 단계마다 메서드 제공, 함수형 컴포넌트는 useEffect로 통합 제어합니다.
• 최신 리액트 프로젝트에서는 함수형 컴포넌트 + Hooks 사용이 권장됩니다.
• useEffect는 의존성 배열을 통해 실행 조건을 세밀하게 조절할 수 있습니다.

함께 보면 좋은 자료

블로그 글 :

[Vue Lifecycle] Vue 컴포넌트의 일생을 따라가보자

 

---

반응형