React의 핵심, props vs state: 언제, 왜, 어떻게 사용할까?

⚛️ React의 핵심, props vs state: 언제, 왜, 어떻게 사용할까?

React를 조금만 공부해 보면 반드시 마주치는 개념 두 가지가 있어요.

props와 state

이 둘은 컴포넌트 사이의 데이터 흐름과 내부 상태 관리를 다루는 핵심 개념입니다.
처음엔 비슷하게 느껴질 수 있지만, 역할과 사용 시점이 완전히 다르기 때문에 정확하게 구분해서 이해하는 것이 중요해요.

---

📦 props란 무엇인가요?

props(프로퍼티)는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용(Read-only) 데이터입니다.

즉, 컴포넌트 간 데이터 전달용 통로 역할을 하죠.

✅ 예시

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

// 자식 컴포넌트
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

props.name은 부모가 전달한 값을 자식이 받아 출력하는 구조예요.

📌 props는 변경 불가능! → 자식 컴포넌트는 값을 바꿀 수 없어요.

---

🎯 state란 무엇인가요?

state(상태)는 컴포넌트 내에서 선언하고 관리하는 변하는 데이터입니다.

버튼 클릭, 입력값 변경 등 사용자의 상호작용에 따라 값이 바뀌는 것이 특징이에요.

✅ 예시

import { useState } from 'react';

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

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

useState를 사용해 count라는 state를 선언하고, setCount를 통해 변경하고 있어요.

📌 state는 변경 가능! → UI를 동적으로 만들 수 있어요.

---

⚖️ props vs state 차이 한눈에 보기

항목	props	state
역할	부모 → 자식 데이터 전달	컴포넌트 내부 상태 관리
변경 가능 여부	불가능 (읽기 전용)	가능 (useState 사용)
소유자	부모 컴포넌트	자기 자신 컴포넌트
사용 위치	컴포넌트 선언 시 전달	컴포넌트 내부에서 선언
주로 사용하는 경우	재사용 컴포넌트에 외부 데이터 전달	클릭 수, 입력값 등 사용자와 상호작용

 

---

🧩 props와 state를 함께 사용하는 경우

대부분의 실제 컴포넌트에서는 props와 state를 동시에 사용합니다.

function TodoItem({ title, done }) {
  const [checked, setChecked] = useState(done);

  return (
    <div>
      <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
      <span>{title}</span>
    </div>
  );
}

• props: title, done은 부모 컴포넌트가 전달
• state: checked는 사용자 상호작용으로 변화

→ 이처럼 기본값은 props로 받고, 변형은 state로 관리하는 패턴이 실전에서 자주 사용됩니다.

---

💡 잘못 사용하기 쉬운 예시

1. props 값을 직접 바꾸려고 할 때

// ❌ 이렇게 하면 안 됩니다!
props.value = "새로운 값"; 

→ props는 부모가 관리하는 값이므로 자식이 직접 바꾸면 안 됩니다.

2. props를 state로 그대로 복사

// ❌ 비추천
const [localValue, setLocalValue] = useState(props.value);

→ 이후 props가 변경돼도 localValue는 그대로 유지돼버려서 동기화 문제가 발생할 수 있어요.
이 경우엔 useEffect로 동기화 처리가 필요합니다.

---

📚 정리: props vs state 언제 어떤 걸 써야 할까?

• 부모 → 자식으로 전달할 값 → props
• 컴포넌트 안에서 변화하는 값 → state
• 입력 폼, 토글 상태, 카운터 → state
• 상품 이름, 버튼 라벨 등 바뀌지 않는 정보 → props

---

🔍 추가 개념: 상태를 올리는 패턴 (Lifting State Up)

두 자식 컴포넌트가 같은 데이터를 공유할 땐, 부모에서 상태를 관리하고 props로 전달합니다.

이걸 Lifting State Up이라고 해요.

// 부모 컴포넌트
function Parent() {
  const [value, setValue] = useState("");

  return (
    <>
      <InputField value={value} onChange={setValue} />
      <Preview value={value} />
    </>
  );
}

→ 이처럼 상태를 공통 조상 컴포넌트에서 끌어올려 관리하면 두 자식 컴포넌트가 같은 값을 공유할 수 있어요.

---

✅ 마무리

props와 state는 React의 두 기둥과도 같은 존재입니다.

둘의 차이를 정확히 이해하고 상황에 맞게 사용한다면, 더 깔끔하고 유지보수 쉬운 컴포넌트를 만들 수 있어요!

props는 전달, state는 반응
이 원칙만 기억해도 React가 훨씬 쉬워집니다 😄

다음 글에서는 useEffect와 상태 동기화에 대해 알아보면 자연스럽게 이어질 거예요!