5장: 리액트의 상태와 생명주기

alpha2025-04-30 11:48

상태(State)와 생명주기(Lifecycle)의 본질

React를 제대로 활용하려면 꼭 이해해야 하는 두 가지 개념이 있습니다. 바로 "상태(State)"와 "생명주기(Lifecycle)"입니다. 실제로 사용자의 클릭, 입력, 네트워크 응답 등으로 변화하는 화면을 만들어내려면 이 두 개념의 원리를 아는 것이 필수적입니다.

상태란 무엇인가: 살아있는 데이터의 중심

리액트에서 "상태(State)"는 컴포넌트가 기억하고, 변화할 수 있는 데이터를 의미합니다. props가 바깥에서 주어지는 고정된 값이라면, state는 내부에서 변화시키고 관리하는 값입니다. 예를 들어, 버튼을 눌러 숫자가 올라가는 카운터, 사용자가 입력한 텍스트, 서버에서 받아온 데이터 모두 state로 표현할 수 있습니다. 중요한 원칙은 오직 "화면에 영향을 주는 데이터"만 state로 보관해야 한다는 점입니다.

함수형 컴포넌트에서는 useState 훅을 사용해 다음과 같이 상태를 정의합니다.

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

이렇게 선언하면 count의 초깃값은 0이며, setCount를 통해 값을 바꿀 수 있습니다. state가 바뀔 때마다 컴포넌트는 자동으로 다시 렌더링되어 최신 화면을 반영합니다.

생명주기란?: 컴포넌트의 삶과 죽음

모든 리액트 컴포넌트는 생성(Mount) → 갱신(Update) → 소멸(Unmount)이라는 일련의 과정을 거칩니다. 이를 '생명주기'라고 부릅니다. 예컨대, 화면에 처음 등장하는 순간(setup), 변화하는 순간(update), 완전히 사라지는 순간(clean-up) 등에서 특정 코드를 실행할 수 있게 도와줍니다.

클래스 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기 메서드를 사용합니다. 함수형 컴포넌트에서는 useEffect 훅이 그 역할을 대신합니다.

useEffect(() => {
  // 마운트될 때 실행
  return () => {
    // 언마운트될 때 실행(청소)
  };
}, []);

첫 번째 인자는 실행할 함수, 두 번째 배열은 의존성(deps)입니다. 빈 배열을 넣으면 최초 한 번만 실행됩니다.

간단한 예제: 시계 만들기

이제 상태와 생명주기를 활용하는 실전 예제를 살펴봅시다. 매초 시간을 표시하는 시계를 만들어보겠습니다.

import { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <h2>현재 시각: {time.toLocaleTimeString()}</h2>;
}

위 예제에서 시각(time)은 state로 관리됩니다. useEffect는 컴포넌트가 화면에 나타날 때 타이머를 만들고, 사라질 때는 타이머를 정리합니다. 이처럼 상태와 생명주기를 올바르게 이해하면, 실시간 데이터나 복잡한 인터랙션도 손쉽게 구현할 수 있습니다.

실전 개발을 위한 요약

state는 '변화하는 데이터'를 표시할 때만 사용합니다.
컴포넌트의 각 단계(마운트, 업데이트, 언마운트)에서 필요한 로직을 생명주기 훅에 배치합니다.
더욱 복잡한 상태 관리가 필요하다면 Context, Redux, Zustand 등 외부 상태 관리 도구를 선택할 수 있습니다.

이제 state와 생명주기를 제대로 이해하면, React를 활용한 동적인 웹앱 개발이 한층 쉬워집니다. 다음 장에서는 상태 변화와 생명주기를 다양한 컴포넌트에서 어떻게 활용하는지 더 깊이 탐구해보겠습니다.