리액트 Props와 State 차이점 완벽 정리: 데이터 흐름의 기초 잡기 ⚛️

"왜 내 데이터는 안 변하지?" 리액트 초보 탈출을 위한 필수 개념, Props와 State를 5분 만에 이해해 봅시다.

리액트(React)를 처음 공부하다 보면 가장 먼저 헷갈리는 두 가지 용어가 있습니다.
바로 Props(프롭스)와 State(스테이트)입니다.
둘 다 화면에 보여줄 '데이터'를 다룬다는 점은 같지만, 그 역할과 성격은 완전히 정반대입니다.

😵 초보자의 흔한 실수:
"부모 컴포넌트에서 받은 Props를 자식 컴포넌트에서 바로 수정하려고 시도합니다." (이러면 에러가 나거나 작동하지 않습니다!)

이 글에서는 어려운 전문 용어 대신 쉬운 비유를 통해 두 개념의 차이를 명확히 짚어드리고,
언제 무엇을 써야 하는지 확실한 기준을 세워드리겠습니다.
리액트의 데이터 흐름, 이제 두려워하지 마세요!

🎁 1. Props: 부모가 자식에게 주는 선물

Props는 'Properties'의 줄임말로, 컴포넌트 간에 데이터를 전달할 때 사용합니다.
가장 중요한 특징은 부모에서 자식으로만(Top-Down) 흐른다는 점입니다.

📌 Props의 핵심 특징

읽기 전용(Read-only): 자식 컴포넌트는 받은 Props를 절대 수정할 수 없습니다.
외부 주입: 컴포넌트 내부가 아닌 외부(부모)에서 결정되어 내려옵니다.
비유: 부모님께 물려받은 'DNA'나 '이름'과 같습니다. 내가 임의로 바꿀 수 없죠.

즉, Props는 컴포넌트의 '설정값'과 같습니다.
동일한 버튼 컴포넌트라도 Props로 color="red"를 주느냐 color="blue"를 주느냐에 따라 다른 모습으로 렌더링 됩니다.

💾 2. State: 내 안에서 변화하는 상태

State는 컴포넌트 내부에서 생성되고, 시간이 지남에 따라 변할 수 있는 값입니다.
사용자의 입력, 버튼 클릭, 서버 응답 등에 의해 값이 바뀌면 리액트는 화면을 자동으로 다시 그립니다(Re-rendering).

📌 State의 핵심 특징

변경 가능(Mutable): setState 함수를 통해 값을 바꿀 수 있습니다.
내부 관리: 컴포넌트 자신이 직접 관리하는 데이터입니다.
비유: 나의 '기분'이나 '나이'와 같습니다. 상황에 따라 변하고 내가 제어할 수 있습니다.

리액트 함수형 컴포넌트에서는 주로 useState 훅(Hook)을 사용하여 이 State를 관리합니다.

⚔️ 3. 한눈에 보는 비교 & 실전 코드

두 개념의 차이를 표로 정리해 보았습니다. 이 표만 기억해도 헷갈릴 일은 없습니다.

구분	Props (프롭스)	State (스테이트)
데이터 출처	부모 컴포넌트	컴포넌트 자체 (내부)
변경 가능 여부	불가능 (Immutable)	가능 (Mutable)
사용 목적	설정값 전달, 데이터 표시	사용자 인터랙션, 동적 데이터

💻 코드로 확인하기

아래 코드는 부모가 자식에게 이름을 주고(Props), 자식은 자신의 나이를 관리하는(State) 예시입니다.

                
// 자식 컴포넌트 (Child)
function UserCard(props) {
  // state: 나이는 변할 수 있음 (초기값 20)
  const [age, setAge] = useState(20); 

  return (
    <div>
      {/* props: 이름은 부모가 준 대로 표시만 함 (변경 불가) */}
      <h2>이름: {props.name}</h2>
      <p>나이: {age}</p>
      
      {/* 버튼 클릭 시 state 변경 -> 화면 자동 갱신 */}
      <button onClick={() => setAge(age + 1)}>
        한 살 먹기
      </button>
    </div>
  );
}

// 부모 컴포넌트 (Parent)
function App() {
  return (
    <div>
      {/* props로 '철수'라는 데이터를 전달 */}
      <UserCard name="철수" />
    </div>
  );
}
                
            

✨ 마치며: 데이터 흐름의 마스터

Props와 State는 리액트를 지탱하는 두 개의 기둥입니다.
Props는 컴포넌트 간의 연결 고리가 되어주고, State는 컴포넌트를 살아 숨 쉬게 만듭니다.

📝 3줄 요약

Props는 부모가 주는 선물이며, 자식은 뜯어볼 수만 있고 바꿀 수는 없다.
State는 내 주머니 속의 물건이며, 내가 마음대로 바꾸고 관리할 수 있다.
State가 바뀌면 리액트는 화면을 다시 그린다(Re-render).

⚛️ 리액트 개발 환경 세팅: CRA vs Vite