React의 `state`(상태)와 `props`(프로퍼티)

Blue_bull 2025. 2. 12. 09:19

✅ React의 `state`(상태)와 `props`(프로퍼티) 완벽 정리

1️⃣ `state`(상태)란?

state는 컴포넌트 내부에서 선언하고 관리하는 데이터(상태) 이다.
이 값이 변경되면 해당 컴포넌트가 자동으로 리렌더링된다.

📌 `state` 특징

✔️ 컴포넌트 내부에서만 관리 가능 (외부에서 직접 변경 불가).
✔️ useState()를 사용해 생성하고, setState()로만 변경 가능.
✔️ state가 변경되면 자동으로 해당 컴포넌트가 다시 렌더링됨.
✔️ 부모의 state를 자식 컴포넌트에 props로 전달 가능.

📝 `state` 예제

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // state 선언

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

💡 동작 과정

1️⃣ useState(0)을 사용해 count 값을 0으로 초기화.
2️⃣ 버튼 클릭 시 setCount(count + 1) 실행 → count 값 변경.
3️⃣ count 값이 변경되면 컴포넌트가 자동으로 리렌더링됨.

2️⃣ `props`(프로퍼티)란?

props는 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터이다.
자식 컴포넌트는 props를 변경할 수 없으며, 읽기 전용(immutable) 데이터이다.

📌 `props` 특징

✔️ 부모 → 자식으로만 데이터 전달 가능 (단방향).
✔️ 자식 컴포넌트는 props를 직접 변경할 수 없음 (읽기 전용).
✔️ 부모의 state를 props로 전달하여 자식이 해당 데이터를 사용할 수 있음.
✔️ 부모가 props 값을 변경하면 자식 컴포넌트가 다시 렌더링됨.

📝 `props` 예제

function Parent() {
  const [message, setMessage] = useState("Hello!");

  return <Child text={message} />;
}

function Child({ text }) {
  return <p>부모가 보낸 메시지: {text}</p>;
}

💡 동작 과정

1️⃣ 부모(Parent)는 state(message)를 관리.
2️⃣ message 값을 props로 Child에게 전달.
3️⃣ 자식(Child) 컴포넌트는 props.text를 출력하지만, 직접 변경할 수 없음.

3️⃣ `state`와 `props` 비교

구분	`state` (상태)	`props` (프로퍼티)
변경 가능 여부	✅ 변경 가능 (`setState` 사용)	❌ 변경 불가능 (읽기 전용)
관리 주체	컴포넌트 내부에서 관리	부모가 관리, 자식에게 전달
리렌더링	값 변경 시 해당 컴포넌트가 리렌더링	값 변경 시 자식 컴포넌트가 리렌더링
사용 목적	동적인 값 관리 (ex: 사용자 입력, UI 상태)	부모 → 자식 데이터 전달 (ex: 설정 값)
변경 방법	`setState` 함수 사용	변경 불가능 (부모에서만 변경 가능)

4️⃣ `state`를 `props`로 전달하는 방법

📌 state는 부모 컴포넌트에서 생성하고, props로 자식 컴포넌트에 전달할 수 있다.

📝 `state` → `props` 전달 예제

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

  return <Child value={count} />;
}

function Child({ value }) {
  return <p>부모에서 받은 값: {value}</p>;
}

💡 핵심 개념:

Parent는 state(count)를 관리.
count 값을 props.value로 Child에 전달.
Child는 value를 받아 출력하지만, 직접 변경할 수 없음.

5️⃣ 자식에서 부모의 `state` 변경하기 (`props`로 함수 전달)

🚨 props는 읽기 전용이므로, 자식이 부모의 state를 변경하려면 함수를 props로 전달해야 한다.

📝 해결 방법 (함수 전달)

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

  return <Child count={count} increase={() => setCount(count + 1)} />;
}

function Child({ count, increase }) {
  return (
    <div>
      <p>부모로부터 받은 값: {count}</p>
      <button onClick={increase}>+</button>
    </div>
  );
}

💡 핵심 개념:

부모는 setCount를 직접 전달하지 않고, increase()라는 함수를 만들어 넘김.
자식에서 increase() 실행 → 부모의 state가 변경됨 → 자동으로 리렌더링.

6️⃣ `state`와 `props` 언제 사용할까?

사용 상황	`state` 사용	`props` 사용
값이 변경될 필요가 있는가?	✅ `state` 사용	❌ 변경되지 않는다면 `props` 사용
부모 → 자식으로 전달하는 데이터인가?	❌ `state`는 컴포넌트 내부에서만 사용	✅ 부모 → 자식 데이터 전달 가능
UI가 동적으로 변화해야 하는가?	✅ `state` 사용 (ex: 카운터, 입력값)	❌ 단순히 전달된 값 표시 (ex: 텍스트, 설정 값)
데이터를 변경할 주체가 누구인가?	✅ 컴포넌트 내부에서 변경 필요	❌ 부모에서 변경하여 자식에 전달

📌 정리

state는 내부에서 관리하는 변경 가능한 데이터.
props는 부모가 자식에게 전달하는 읽기 전용 데이터.

7️⃣ 요약 정리

✅ `state`

컴포넌트 내부에서 관리하는 값 (변경 가능)
useState()를 사용해 선언하고 setState()로 변경
값이 변경되면 해당 컴포넌트가 리렌더링됨

✅ `props`

부모 → 자식으로 데이터를 전달하는 방법 (읽기 전용)
자식 컴포넌트에서는 직접 변경할 수 없음
부모가 state를 관리하고, props로 넘겨 자식이 사용 가능

📌 한 문장 요약

state는 컴포넌트 내부에서 관리하는 값.
props는 부모가 자식에게 넘기는 읽기 전용 값.

이제 state와 props를 완벽하게 이해했을 거예요! 🚀