React(리액트) 프롭스와 상태

좋아요! React에서 Props와 상태(State) 관리는 핵심 개념이라 이해하면 컴포넌트 구조와 데이터 흐름이 확실히 보입니다. 😎

---

1️⃣ Props (속성)

정의

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 읽기 전용 값
• 단방향(부모 → 자식) 데이터 흐름을 만듦

특징

• 읽기 전용 → 자식 컴포넌트가 직접 수정 불가
• 함수도 전달 가능 → 자식에서 부모 이벤트 호출 가능

예시

function Child({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function Parent() {
  return <Child name="Alice" />;
}

• 부모 Parent가 Child에게 name="Alice" 전달
• 자식 Child는 읽기만 가능, 수정 X

---

Props 사용 시 장점

• 데이터 흐름 명확
• 재사용 가능한 컴포넌트 작성 가능
• 테스트 용이

---

2️⃣ State (상태)

정의

• 컴포넌트 내부에서 관리되는 데이터
• 값이 바뀌면 UI가 자동으로 리렌더링됨

특징

• 변경 가능 → useState나 클래스 컴포넌트 this.state 사용
• 단방향 흐름이 아닌, 컴포넌트 내부 제어 가능

예시 (함수형 컴포넌트)

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

• count라는 상태를 선언
• 버튼 클릭 시 setCount로 변경 → UI 자동 업데이트

---

State 사용 시 장점

• 컴포넌트 자체적으로 데이터 관리 가능
• 사용자 인터랙션, API 호출 결과 등 동적 데이터 처리에 필수
• 리액트가 상태 변화 감지 후 자동 리렌더링

---

3️⃣ Props vs State 비교

항목	Props	State
수정 가능 여부	❌ 읽기 전용	✅ 변경 가능
데이터 소유자	부모	해당 컴포넌트
사용 목적	부모 → 자식 데이터 전달	컴포넌트 내부 데이터 관리
UI 업데이트	부모가 바꿀 때만 리렌더	상태 변경 시 자동 리렌더

---

4️⃣ 실무 패턴

• Props로 자식에게 데이터/함수 전달
• State로 컴포넌트 내부 UI/로직 관리
• 복잡한 앱 → 전역 상태 관리(Redux, Recoil, Zustand 등) 사용
  → 여러 컴포넌트가 같은 상태 공유 가능

---

💡 한 줄 요약

Props = 부모가 주는 읽기 전용 데이터
State = 컴포넌트가 가진 변경 가능한 데이터

---

원하면 제가 이걸 그림으로 데이터 흐름 + 상태 변경 시 UI 리렌더링까지 시각화해서 보여드릴 수 있어요.
그럼 한눈에 이해됩니다.

그림으로 그려드릴까요?