[React] React.js 강좌 2. Props와 State 완벽 정리

1. Props와 State란 무엇인가?

리액트를 배우다 보면 가장 자주 등장하는 단어가 Props와 State입니다.
이 둘은 리액트에서 데이터를 관리하고 전달하는 핵심 개념으로,
컴포넌트 간의 데이터 흐름을 이해하려면 반드시 알아야 하는 부분입니다.

간단히 말하자면 이렇습니다.

• Props: 부모 컴포넌트가 자식 컴포넌트로 데이터를 “전달”할 때 사용
• State: 컴포넌트 내부에서 스스로 관리하는 데이터

즉, Props는 외부에서 주입되는 데이터,
State는 내부에서 변화하는 데이터라고 보면 됩니다.

---

2. Props의 개념과 사용법

Props는 "Properties"의 줄임말로,
부모 컴포넌트가 자식 컴포넌트에게 값을 넘길 때 사용합니다.

예를 들어, 아래와 같은 구조를 생각해봅시다.

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

function App() {
  return (
    <div>
      <Welcome name="기범" />
      <Welcome name="지수" />
    </div>
  );
}

위 코드에서 App은 Welcome이라는 자식 컴포넌트에게
name이라는 props를 전달합니다.

자식 컴포넌트에서는 이를 **매개변수(props)**를 통해 접근하고,
{props.name} 형태로 화면에 출력합니다.

즉, Props는 부모에서 자식으로 “읽기 전용 데이터”를 전달하는 수단입니다.

---

3. Props는 읽기 전용이다

Props는 전달받은 값을 수정할 수 없습니다.
이는 리액트의 “단방향 데이터 흐름(One-Way Data Flow)” 원칙 때문입니다.

만약 자식 컴포넌트가 props를 직접 수정하려 하면 오류가 발생합니다.

function Welcome(props) {
  props.name = '수정된 이름'; // ❌ 오류 발생
  return <h1>{props.name}</h1>;
}

리액트는 이렇게 강제적으로 구조를 제한함으로써
데이터 흐름이 예측 가능하고, 버그 추적이 쉬운 환경을 만듭니다.

---

4. State의 개념

이제 **State(상태)**를 알아봅시다.
State는 컴포넌트 내부에서 변할 수 있는 데이터를 저장할 때 사용합니다.

예를 들어, 버튼을 클릭할 때마다 숫자가 1씩 증가하는 기능을 구현한다고 하면
State를 이렇게 사용할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

여기서 useState(0)은 count라는 상태 변수와
이 값을 변경할 수 있는 함수 setCount를 반환합니다.

버튼을 누를 때마다 setCount(count + 1)이 호출되어,
컴포넌트는 자동으로 다시 렌더링됩니다.

---

5. Props와 State의 차이 한눈에 보기

구분 Props State

데이터 주체	부모 → 자식	컴포넌트 내부
변경 가능 여부	불가능 (읽기 전용)	가능 (setState / useState로 변경)
사용 목적	외부 데이터 전달	내부 동적 데이터 관리
변경 시 렌더링	변경 불가능	변경 시 자동 렌더링 발생

React의 컴포넌트는 이 두 가지 개념을 기반으로 움직입니다.
Props는 데이터를 전달하고,
State는 화면을 업데이트합니다.

---

6. Props와 State 함께 사용하기

실제 프로젝트에서는 Props와 State가 함께 쓰이는 경우가 많습니다.
예를 들어, 부모 컴포넌트에서 초기값을 전달하고,
자식 컴포넌트가 내부적으로 상태를 관리하는 방식입니다.

function Counter({ initialValue }) {
  const [count, setCount] = useState(initialValue);

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

function App() {
  return <Counter initialValue={5} />;
}

이 예제에서는 App 컴포넌트가 initialValue라는 props를 전달합니다.
Counter는 그 값을 내부 state의 초기값으로 사용하죠.
이처럼 props → state의 흐름은 리액트에서 매우 일반적인 패턴입니다.

---

7. 마무리 정리

• Props는 부모에서 자식으로 데이터를 전달하는 통로입니다.
• State는 컴포넌트 내부에서 변경 가능한 데이터입니다.
• Props는 읽기 전용, State는 수정 가능입니다.
• 이 두 가지를 잘 이해해야 React의 데이터 흐름을 완벽히 파악할 수 있습니다.

다음 글에서는 컴포넌트를 효율적으로 관리하는 방법,
즉 React Fragments와 컴포넌트 구조화에 대해 다루겠습니다.