[React] props와 state 차이 이해하기, 상태 끌어올리기

React 컴포넌트는 레고 블록과 같습니다. 조각조각 만들어진 컴포넌트들을 조합하여 하나의 완성된 웹 페이지를 구축합니다.

이때 "컴포넌트에 전달되는 데이터"와 "컴포넌트 내부에서 변하는 데이터"를 관리하기 위해 사용하는 핵심 개념이 바로 Props와 State입니다.

이번 포스팅에서는 Props와 State의 각각의 개념과 특징, 한눈에 보는 비교표, 그리고 두 개념을 함께 활용하는 상태 끌어올리기(Lifting State Up) 패턴까지 알아보겠습니다.

---

1. Props (Properties)란?

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다.

함수에 전달하는 매개변수(Parameter)와 유사한 개념으로 생각하면 이해하기 쉽습니다.

📌 Props의 핵심 특징

• 읽기 전용 (Read-Only): 자식 컴포넌트는 전달받은 Props를 직접 수정할 수 없습니다. (불변성 유지)
• 단방향 데이터 흐름: 데이터는 항상 부모 ➔ 자식 방향으로만 흐릅니다.

💻 Props 활용 예제 코드

import React from 'react';

// [자식 컴포넌트]
// 부모로부터 props 객체를 전달받습니다.
// 구조 분해 할당({ name, role, age = 20 })을 사용하여 깔끔하게 가져올 수 있습니다.
function UserCard({ name, role, age = 20 }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>
      {/* 전달받은 props 값을 화면에 렌더링합니다. */}
      <h3>이름: {name}</h3>
      <p>역할: {role}</p>
      <p>나이: {age}세</p>
    </div>
  );
}

// [부모 컴포넌트]
function App() {
  return (
    <div>
      <h2>팀원 목록</h2>
      {/* 
        자식 컴포넌트에 속성(Attribute) 형태로 데이터를 전달합니다.
        문자열은 ""로, 숫자/객체/함수 등은 {}로 감싸서 전달합니다.
      */}
      <UserCard name="김철수" role="프론트엔드 개발자" age={25} />
      <UserCard name="이영희" role="백엔드 개발자" age={28} />
      {/* age를 전달하지 않으면 자식 컴포넌트의 기본값(20)이 적용됩니다. */}
      <UserCard name="박민수" role="디자이너" />
    </div>
  );
}

export default App;

---

2. State란?

State는 컴포넌트 내부에서 생성되고 관리되는 상태 값입니다.

유저와의 상호작용(클릭, 입력 등)을 통해 시간에 따라 변경될 수 있는 데이터를 다룰 때 사용합니다.

📌 State의 핵심 특징

• 가변성 (Mutable): useState에서 제공하는 상태 변경 함수(setState)를 통해 변경할 수 있습니다.
• 리렌더링 유발: State 값이 변경되면, React는 해당 컴포넌트와 자식 컴포넌트를 자동으로 리렌더링하여 화면을 갱신합니다.
• 비공개 (Private): 기본적으로 해당 State가 선언된 컴포넌트 내부에서만 접근할 수 있습니다.

💻 State 활용 예제 코드

import React, { useState } from 'react';

function LikeButton() {
  // useState Hook으로 likeCount 상태를 선언합니다.
  // isLiked: 현재 좋아요 여부 (Boolean)
  // setIsLiked: isLiked 상태를 변경하는 함수
  const [isLiked, setIsLiked] = useState(false);

  // likeCount: 좋아요 개수
  const [likeCount, setLikeCount] = useState(0);

  // 좋아요 토글 핸들러
  const handleToggleLike = () => {
    if (isLiked) {
      // 이미 좋아요 상태라면 해제 (-1)
      setIsLiked(false);
      setLikeCount((prev) => prev - 1);
    } else {
      // 좋아요 안 한 상태라면 설정 (+1)
      setIsLiked(true);
      setLikeCount((prev) => prev + 1);
    }
  };

  return (
    <div style={{ textAlign: 'center', margin: '20px' }}>
      <button 
        onClick={handleToggleLike}
        style={{ 
          backgroundColor: isLiked ? '#ff4d4f' : '#e6e6e6', 
          color: isLiked ? '#fff' : '#000',
          padding: '10px 20px',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer'
        }}
      >
        {isLiked ? '❤️ 좋아요 취소' : '🤍 좋아요'} ({likeCount})
      </button>
    </div>
  );
}

export default LikeButton;

---

3. Props vs State 한눈에 비교하기

두 개념을 비교 정리하면 다음과 같습니다.

구분	Props	State
개념	부모로부터 전달받은 데이터	컴포넌트 내부에서 직접 관리하는 데이터
소유권	부모 컴포넌트	해당 State를 정의한 컴포넌트
수정 가능 여부	불가능 (Read-Only)	가능 (setter 함수 사용)
초기값 설정	부모 컴포넌트에서 전달	useState(초기값)으로 지정
주요 용도	컴포넌트 재사용, 데이터 전달	UI 변화를 일으키는 동적 데이터 관리

💡 한 줄 요약: Props는 컴포넌트 외부에서 들어오는 설정값이고, State는 컴포넌트 내부에서 변화하는 데이터입니다.

---

4. Props와 State 함께 사용하기 (상태 끌어올리기)

실무에서는 "부모의 State를 자식에게 Props로 전달"하거나, "자식에서 발생한 이벤트를 부모의 State에 반영"하는 패턴을 정말 자주 사용합니다.

이를 React에서는 상태 끌어올리기 (Lifting State Up)라고 부릅니다.

💻 상태 끌어올리기 예제 코드

부모 컴포넌트가 State를 가지고 있고, 자식 컴포넌트에게 상태 값과 상태 변경 함수를 각각 Props로 전달하는 형태입니다.

import React, { useState } from 'react';

// [자식 컴포넌트 1: 입력 폼]
// 부모로부터 text 상태와 setText 변경 함수를 props로 전달받습니다.
function TodoInput({ inputText, onInputChange, onAddTodo }) {
  return (
    <div>
      <input 
        type="text" 
        value={inputText} 
        onChange={(e) => onInputChange(e.target.value)} // 부모의 state를 변경 요청
        placeholder="할 일을 입력하세요"
      />
      <button onClick={onAddTodo}>추가</button>
    </div>
  );
}

// [자식 컴포넌트 2: 리스트 표시]
// 부모로부터 todos 배열을 props로 전달받아 렌더링만 전담합니다.
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

// [부모 컴포넌트: 모든 State 통합 관리]
function TodoApp() {
  // 1. 전체 할 일 목록 State
  const [todos, setTodos] = useState(['리액트 공부하기', 'State와 Props 정리하기']);

  // 2. 현재 입력 중인 텍스트 State
  const [inputText, setInputText] = useState('');

  // 할 일 추가 핸들러
  const handleAddTodo = () => {
    if (inputText.trim() === '') return;
    setTodos((prevTodos) => [...prevTodos, inputText]); // 불변성 유지하며 배열 추가
    setInputText(''); // 입력창 초기화
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>📝 나의 Todo 앱</h2>
      {/* 자식 컴포넌트에게 State와 핸들러 함수를 Props로 내려줍니다. */}
      <TodoInput 
        inputText={inputText} 
        onInputChange={setInputText} 
        onAddTodo={handleAddTodo} 
      />
      <TodoList todos={todos} />
    </div>
  );
}

export default TodoApp;

---

5. 핵심 요약

1. Props는 외부(부모)에서 받는 데이터이며, 자식 쪽에서 절대 변경할 수 없는 읽기 전용 값입니다.
2. State는 컴포넌트 내부에서 생성/변경되는 데이터이며, 값이 바뀌면 화면이 자동으로 리렌더링됩니다.
3. 자식 컴포넌트가 부모의 데이터 상태를 바꾸고 싶다면, 부모가 상태 변경 함수(Setter Function)를 Props로 넘겨주어 호출하게 만듭니다.