1. Props

1.1 Props란 무엇인가?

• 정의:

  Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터(속성)입니다.

  • 읽기 전용(Immutable): 자식 컴포넌트에서 props를 변경할 수는 없으며, 오직 참조만 가능합니다.
  • 재료와 쿠키 틀 비유: 부모(재료) → 컴포넌트(쿠키 틀) → 엘리먼트(쿠키).

1.2 Props의 특징과 역할

• 컴포넌트 간 데이터 전달:

  React 애플리케이션에서 상위(부모) 컴포넌트가 데이터(예: title, userInfo 등)를 하위(자식) 컴포넌트로 전달할 때 props를 사용합니다.

• 불변(Immutable):

  자식 컴포넌트는 받은 props를 수정할 수 없으며, 오직 렌더링 용도로만 활용할 수 있습니다. 데이터 변경은 보통 상위 컴포넌트나 전역 상태(상태관리 라이브러리)에서 일어납니다.

1.3 예시 코드: Props 전달

// Parent.tsx
import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [name, setName] = useState("Alice");

  return (
    <div>
      <Child userName={name} />
      <button onClick={() => setName("Bob")}>Change Name</button>
    </div>
  );
};

export default Parent;

// Child.tsx
import React from "react";

const Child = ({ userName }) => {
  return <h2>안녕하세요, {userName}님!</h2>;
};

export default Child;

• 해설:
  • Parent 컴포넌트에서 name 상태값을 가지고 있고, 이를 Child 컴포넌트의 props로 전달합니다.
  • Child 내부에서는 props.userName을 읽어 화면에 렌더링하며, props를 변경할 수는 없습니다.

2. State

2.1 State란 무엇인가?

• 정의:

  State는 컴포넌트 내부에서 관리되는, 변경 가능한 데이터(상태)를 의미합니다.

  • 변경 가능(Mutable): 컴포넌트 안에서 setState 또는 useState를 통해 값을 업데이트 할 수 있습니다.
  • State가 변하면 React는 해당 컴포넌트를 다시 렌더링하여 최신 UI를 반영합니다.

2.2 State와 Props의 차이

• Props:
  • 외부(부모 컴포넌트)로부터 주어진 읽기 전용 데이터
  • 컴포넌트에 전달된 후, 내부에서 수정할 수 없음
• State:
  • 컴포넌트 내부에서 선언 및 관리되는 변경 가능한 데이터
  • useState, useReducer 등을 통해 업데이트 가능