React State와 Props 차이점에 대해서 알아보자

한 눈에 보는 요약

컴포넌트는 레고 블록과 같습니다. 이때 Props는 외부에서 조립할 때 끼워주는 부품(설정값) 이고, State는 블록 내부에서 스스로 움직이는 스위치(상태값) 입니다.

특징	Props	State
개념	컴포넌트 외부에서 전달받는 데이터	컴포넌트 내부에서 관리하는 데이터
가변성	불변 / 읽기 전용	가변 / 변경 가능
업데이트	부모 컴포넌트가 재렌더링할 때 변경됨	useState 등의 상태 변경 함수로 업데이트
용도	컴포넌트 간 데이터 전달 및 재사용	UI의 동적인 상호작용 (입력, 클릭 등) 반영

Props 란?

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 '읽기 전용 데이터'입니다. 자식 컴포넌트 입장에서는 함수에 들어오는 파라미터(매개변수)와 같습니다.

주요 특징

• 함수 인와 유사: 외부로부터 값을 받아 컴포넌트의 형태나 내용을 결정합니다.

• 읽기 전용: 자식 컴포넌트 내부에서 전달받은 Props를 직접 수정할 수 없습니다. 데이터는 상위에서 하위로만 흐릅니다. (단방향 데이터 흐름)

Next.js 코드 예시

// 1. 자식 컴포넌트 (UserProfile.tsx)
interface UserProps {
  name: string;
  role: string;
}

export default function UserProfile({ name, role }: UserProps) {
  return (
    <div className="p-4 border rounded-lg shadow-sm">
      <h2 className="text-xl font-bold">{name}</h2>
      <p className="text-gray-500">{role}</p>
    </div>
  );
}

// 2. 부모 컴포넌트 (page.tsx)
import UserProfile from './UserProfile';

export default function Home() {
  return (
    <main className="p-8 space-y-4">
      <h1 className="text-2xl font-bold">팀원 목록</h1>
      {/* 부모가 자식에게 Props를 전달 */}
      <UserProfile name="김철수" role="Next.js 개발자" />
      <UserProfile name="이영희" role="UI/UX 디자이너" />
    </main>
  );
}

State 란?

State는 컴포넌트 내부에서 생성하고 제어하는 '동적 데이터'입니다. 사용자의 입력, 클릭 이벤트, 서버와의 통신 결과에 따라 값이 변하며, State가 바뀔 때마다 컴포넌트는 UI를 재렌더링 합니다.

주요 특징

• 로컬 변수와 유사: 컴포넌트 자체의 메모리 공간에 저장됩니다.

• 가변성: useState 훅이 제공하는 변경 함수를 통해 자유롭게 수정할 수 있습니다.

• 렌더링 트리거: State가 변경되면 React는 바뀐 부분을 감지하여 UI를 자동으로 업데이트합니다.

⚠️ 주의 (Next.js 13+ App Router 기준): State를 사용하려면 파일 최상단에 "use client" 지시어를 작성하여 클라이언트 컴포넌트로 지정해야 합니다. (서버 컴포넌트는 State를 가질 수 없습니다.)

Next.js 코드 예시

"use client"; // State를 사용하기 위해 클라이언트 컴포넌트로 지정

import { useState } from "react";

export default function Counter() {
  // useState(초기값) -> [현재 상태, 상태를 바꾸는 함수]
  const [count, setCount] = useState<number>(0);

  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md text-center">
      <p className="text-gray-500">현재 카운트</p>
      <p className="text-4xl font-bold my-4">{count}</p>
      
      <button 
        onClick={() => setCount(count + 1)}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
      >
        1 증가
      </button>
    </div>
  );
}

핵심 차이점 3가지 요약

1. 주도권이 어디에 있는가?

   • Props: 나를 불러준 부모에게 주도권이 있습니다.

   • State: 컴포넌트 자기 자신에게 주도권이 있습니다.

2. 값이 변할 수 있는가?

   • Props: 컴포넌트 내부에서 절대 변하지 않는 상수로 취급해야 합니다.

   • State: 컴포넌트 내부에서 이벤트에 따라 계속 변합니다.

3. 재렌더링의 조건은 어떻게 되는가?

   • Props: 부모로부터 받는 Props 값이 바뀌면 자식도 재렌더링됩니다.

   • State: 내 State 값이 바뀌면 나 자신과 내 자식들이 재렌더링됩니다.