[React] State와 Lifecycle 개념 정리

리액트의 컴포넌트 구조를 이해했다면, 이제 그 안에서 어떻게 동적인 데이터를 다루는지를 알아야 한다. 그 중심에 있는 개념이 바로 state(상태) 와 lifecycle(생명주기) 이다. 이번 글에서는 이 두 가지에 대해 정리해본다.

---

State와 Lifecycle의 정의

State란?

state는 컴포넌트 내부에서 관리되는 데이터로, UI에 영향을 주는 값이다. props는 외부에서 전달되는 값이라면, state는 컴포넌트 자체가 소유하고 변경할 수 있는 값이다. state가 변경되면 컴포넌트는 자동으로 다시 렌더링된다.

리액트에서는 useState라는 훅을 통해 state를 사용할 수 있다.

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

이처럼 useState를 통해 상태 값을 선언하고, 이 값을 변경할 때 setCount처럼 제공된 함수로 갱신한다.

Lifecycle이란?

컴포넌트는 생성되고 업데이트되며, 결국 제거되는 과정을 거친다. 이 일련의 과정을 컴포넌트 생명주기라고 한다. 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 같은 라이프사이클 메서드를 통해 이 흐름에 개입할 수 있다.

하지만 함수형 컴포넌트에서는 이 역할을 useEffect 훅을 통해 처리한다.

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('컴포넌트가 마운트됨');

    return () => {
      console.log('컴포넌트가 언마운트됨');
    };
  }, []);

  return <div>Hello</div>;
}

• 빈 배열 []을 두 번째 인자로 넣으면, 이 useEffect는 마운트될 때만 실행된다.
• return 안에 정의된 함수는 언마운트 시 실행된다.

이처럼 컴포넌트의 상태 변화에 따라 특정 로직을 실행할 수 있다.

---

마무리

state는 사용자와의 상호작용을 처리하거나 내부 데이터를 유지하는 데 사용되며, lifecycle은 컴포넌트가 언제 생기고 사라지는지를 제어할 수 있는 도구이다. 이 둘은 리액트에서 동적인 UI를 만들기 위한 핵심 개념이다.