리액트 초보 탈출: Props vs State 5분 완성 가이드

 

리액트(React)를 공부하다 보면 가장 먼저 마주치는 벽이 바로 **"데이터를 어떻게 다루는가?"**입니다. 리액트에서 데이터를 다루는 두 가지 핵심 방법인 Props와 State, 이 둘의 차이점을 완벽하게 파헤쳐 보겠습니다.

1. 한 줄 요약: 외부와 내부의 차이

먼저 아주 간단한 비유로 시작해 봅시다.

• Props (Properties): 부모님께 물려받은 '이름' (내가 바꿀 수 없고, 전달받은 대로 써야 함)
• State: 현재 나의 '기분' (상황에 따라 내가 스스로 바꿀 수 있음)

2. Props (외부에서 전달받는 읽기 전용 데이터)

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다. 자식 컴포넌트 입장에서 Props는 **'읽기 전용(Immutable)'**입니다. 즉, 전달받은 값을 직접 수정할 수 없습니다.

💡 Props 예제: 인사하는 컴포넌트

부모 컴포넌트가 자식에게 name이라는 정보를 전달하는 상황입니다.

// 부모 컴포넌트
function App() {
  return <Welcome name="철수" />;
}

// 자식 컴포넌트
function Welcome(props) {
  // props.name = "영희"; // ❌ 에러! Props는 직접 수정할 수 없습니다.
  return <h1>안녕하세요, {props.name}님!</h1>;
}

3. State (컴포넌트 내부에서 관리하는 가변 데이터)

State는 컴포넌트 내부에서 생성되고 관리되는 데이터입니다. 사용자와의 상호작용(클릭, 입력 등)을 통해 값이 변해야 할 때 사용합니다. State가 변하면 리액트는 해당 컴포넌트를 **다시 렌더링(Re-rendering)**합니다.

💡 State 예제: 좋아요 버튼

클릭할 때마다 숫자가 올라가는 기능은 컴포넌트 스스로 관리해야 하므로 State가 필요합니다.

import { useState } from 'react';

function LikeButton() {
  // count라는 상태를 0으로 초기화
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>좋아요 수: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        좋아요 누르기
      </button>
    </div>
  );
}

4. Props vs State 비교 분석

구분PropsState

개념	부모로부터 받은 속성	컴포넌트 내부의 상태
수정 가능 여부	불가능 (읽기 전용)	가능 (setState/useState 사용)
관리 주체	부모 컴포넌트	해당 컴포넌트 자신
용도	데이터 전달 및 컴포넌트 재사용	유저와의 상호작용, 동적 데이터 처리

5. 실전 응용: Props와 State 함께 쓰기

실제 개발에서는 부모의 State를 자식의 Props로 전달하는 패턴을 가장 많이 사용합니다.

function Parent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {/* 부모의 State를 자식에게 Props로 전달 */}
      <StatusMessage status={isLoggedIn} />
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        로그인 상태 전환
      </button>
    </div>
  );
}

function StatusMessage(props) {
  // 전달받은 Props에 따라 다른 메시지 출력
  return (
    <h2>현재 상태: {props.status ? "로그인됨" : "로그아웃됨"}</h2>
  );
}

6. 마지막 정리: 언제 무엇을 쓸까?

1. 컴포넌트가 스스로 데이터를 바꿔야 하나요? ➔ State를 사용하세요.
2. 부모가 자식에게 데이터를 넘겨줘야 하나요? ➔ Props를 사용하세요.
3. 자식이 받은 데이터를 수정해야 하나요? ➔ 직접 수정하지 말고, 부모의 State를 변경하는 함수를 Props로 전달받아 실행하세요.

리액트의 데이터 흐름은 항상 '위에서 아래로(단방향)' 흐른다는 점만 기억하면 Props와 State를 혼동할 일은 없을 것입니다.