React 컴포넌트와 상태(State) 완전 정복: 동적인 UI 개발의 핵심!

React는 현대 웹 개발에서 사용자 인터페이스(UI)를 구축하는 데 가장 널리 사용되는 라이브러리 중 하나입니다. 그 중심에는 바로 컴포넌트와 상태(State) 라는 개념이 있습니다. 이 두 가지 핵심 요소를 깊이 이해하는 것은 React 애플리케이션을 유연하고 효율적으로 개발하는 데 필수적입니다.

마치 레고 블록처럼 각각의 기능과 UI 요소를 독립적인 단위로 캡슐화하는 컴포넌트의 개념부터, 시간이 지남에 따라 변하는 데이터를 관리하는 상태의 역할까지, 지금부터 함께 자세히 알아보겠습니다.

---

컴포넌트, 왜 중요한가요?

React에서 컴포넌트는 애플리케이션의 UI를 구성하는 독립적이고 재사용 가능한 조각입니다. 개발자는 컴포넌트를 통해 복잡한 UI를 훨씬 쉽게 관리하고 구축할 수 있습니다.
이는 마치 전체 건물을 짓기 위해 벽, 문, 창문 등 각각의 기능을 가진 부품들을 조립하는 것과 같습니다.

각 컴포넌트는 프롭스(props) 라고 불리는 입력을 받아들이고, UI의 특정 부분이 어떻게 보여야 하는지를 기술하는 React 요소를 반환합니다.

컴포넌트의 두 가지 유형

1. 함수 컴포넌트 (Function Components)
   가장 기본적인 형태의 컴포넌트로, 단순히 JSX(JavaScript XML)를 반환하는 함수입니다. 주로 UI를 표현하는 데 사용되며 최근 React 개발에서 압도적으로 선호됩니다.

   function Greeting(props) {
       return <h1>안녕하세요, {props.name}님!</h1>;
   }

   위 예시는 props로 전달받은 name 값을 화면에 출력합니다.

2. 클래스 컴포넌트 (Class Components)
   React.Component를 상속받아 생성되는 클래스 기반 컴포넌트로, 생명주기 메서드와 로컬 상태 관리가 가능했습니다. 하지만 React Hooks의 등장 이후 함수 컴포넌트로 대체되는 추세입니다.

   class Greeting extends React.Component {
       render() {
           return <h1>안녕하세요, {this.props.name}님!</h1>;
       }
   }

---

컴포넌트 상태(State) 이해하기: 동적인 UI의 심장

상태(State) 는 컴포넌트가 특정 시점에 어떻게 동작하고 렌더링될지를 결정하는 데이터 객체입니다.

상태는 시간이 지남에 따라 변하는 데이터를 저장하며, 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링하여 변경사항을 즉시 반영합니다.

예시로, 사용자가 버튼을 클릭할 때마다 숫자가 증가하는 카운터나 입력창에 입력한 텍스트가 바로 화면에 반영되는 것이 상태 관리 덕분입니다.

---

클래스 컴포넌트에서 상태 사용하기

클래스 컴포넌트는 constructor에서 상태를 선언하고 this.setState()로 업데이트합니다.

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // 초기 상태 지정
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 }); // 상태 업데이트
    };

    render() {
        return (
            <div>
                <p>현재 카운트: {this.state.count}</p>
                <button onClick={this.increment}>증가</button>
            </div>
        );
    }
}

버튼을 클릭하면 count 값이 1씩 증가하고, React가 자동으로 재렌더링합니다.

---

함수 컴포넌트에서 Hook을 사용한 상태 관리

React 16.8 이후 Hooks가 도입되어 함수 컴포넌트에서도 상태를 편리하게 관리할 수 있게 되었습니다. 가장 대표적인 Hook이 바로 useState입니다.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // 상태 선언 및 초기화

    const increment = () => setCount(count + 1);

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={increment}>증가</button>
        </div>
    );
}

useState는 배열 구조 분해 할당으로 상태 값(count) 과 업데이트 함수(setCount) 를 반환합니다.

---

컴포넌트 상태의 핵심 개념

• 캡슐화 (Encapsulation)
  각 컴포넌트는 자신만의 독립적인 상태를 유지합니다. 이는 다른 컴포넌트에 영향을 주지 않으며, 필요 시 props 전달이나 상태 끌어올리기를 통해 공유합니다.

• 반응성 (Reactivity)
  setState나 useState를 통한 상태 변경 시 React가 자동으로 재렌더링하여 즉각적인 사용자 피드백을 제공합니다.

• 생명주기 관리 (Lifecycle Management)
  클래스 컴포넌트는 componentDidMount, componentDidUpdate 같은 메서드를 제공했고, 함수 컴포넌트는 useEffect를 활용해 데이터 로드, 이벤트 등록, 상태 변화 감지 등을 구현할 수 있습니다.

---

결론

React 컴포넌트와 상태(State)를 이해하는 것은 동적이고 반응적인 UI를 개발하는 데 핵심입니다.

• 초보자라면 함수 컴포넌트 + useState Hook 중심으로 학습하는 것이 가장 효율적입니다.
• 이후에는 상태 끌어올리기 (Lifting State Up), Context API, 그리고 고급 상태 관리 라이브러리(Redux, Recoil 등)로 확장해 나갈 수 있습니다.

React의 강력한 상태 관리 덕분에, 개발자는 직관적이고 유지보수하기 쉬운 UI를 구축할 수 있습니다.