[ 요약 ]

• props는 JSX 태그에 전달하는 정보 로, 사용자 정의 컴포넌트에는 모든 Javascript 값 전달 가능
• React 컴포넌트는 props 객체 를 유일한 인자로 받으며, 구조 분해 할당하여 사용
• 모든 props를 자식 컴포넌트에 넘길 경우 JSX spread 문법 사용 (과도한 사용 ❌)
• 부모 컴포넌트는 children 을 props로 받아 중첩된 컨텐츠 표현
• Props는 읽기 전용 스냅샷 으로, 렌더링 할 때마다 새로운 버전의 props를 받음
• Props는 변경할 수 없으므로 상호작용이 필요한 경우 state 사용

학습 내용

• 컴포넌트에 props를 전달하는 방법
• 컴포넌트에서 props를 읽는 방법
• props의 기본값을 지정하는 방법
• 컴포넌트에 JSX를 전달하는 방법
• 시간에 따라 props가 변하는 방식

📘 친숙한 props

props : JSX 태그에 전달하는 정보
<img> 태그에 전달할 수 있는 props는 미리 정의되어 있음 (HTML 표준)
사용자 정의 컴포넌트에는 모든 props 전달 가능

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

📘 컴포넌트에 props 전달하기

다음 두 단계에 걸쳐 Avatar에 props 전달

1. 자식 컴포넌트에 props 전달하기
2. 자식 컴포넌트 내부에서 props 읽기

✅ 1단계: 자식 컴포넌트에 props 전달하기

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

🚨 중요합니다!

person= 뒤에 있는 이중 괄호가 혼란스럽다면, JSX 중괄호 안의 객체로 기억

✅ 2단계: 자식 컴포넌트 내부에서 props 읽기

컴포넌트의 인자로 prop을 읽을 수 있음

function Avatar({ person, size }) {
  // person과 size는 이곳에서 사용가능합니다.
}

props를 사용하면 부모 컴포넌트와 자식 컴포넌트를 독립적으로 생각 가능
props는 함수의 인수와 동일한 역할
React 컴포넌트 함수는 유일한 인자로 props 객체 를 받음
보통은 전체 props 자체를 필요로 하지는 않기에, 개별 props로 구조 분해 할당

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

✅ prop의 기본값 지정하기

값이 지정되지 않았을 때 변수 바로 뒤에 기본값을 넣어 구조 분해 할당 가능
이 기본값은 size prop이 없거나 size={undefined} → 기본값 사용 ✅
그러나 **size={null} 또는 size={0} → 기본값 사용 ❌**

function Avatar({ person, size = 100 }) {
  // ...
}

📘 JSX spread 문법으로 props 전달하기

때때로 전달되는 props는 반복적

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

반복적인 코드는 가독성을 높일 수 있지만, 간결함이 중요할 때 ... 사용
일부 컴포넌트는 모든 props를 자식 컴포넌트에 전달

function Profile(props) {
  return (
    <div className="card">
      **<Avatar {...props} />**
    </div>
  );
}

spread 문법은 제한적으로 사용

📘 자식을 JSX로 전달하기

JSX 태그 내에 콘텐츠 중첩 → 부모 컴포넌트는 해당 콘텐츠를 children 이라는 prop 요소로 받음
부모 컴포넌트가 임의의 JSX로 채울 수 있는 구멍 이 있는 것
패널, 그리드 등의 시각적 래퍼에 종종 사용

import Avatar from './Avatar.js';

**function Card({ children }) {**
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

📘 시간에 따라 props가 변하는 방식

부모 컴포넌트로부터 두 가지 props를 받음
컴포넌트가 시간에 따라 다른 props를 받을 수 있음
props 항상 고정 ❌

export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}

props는 컴포넌트의 데이터를 처음에만 반영하는 것이 아니라 모든 시점에 반영
props를 변경해야 하는 경우 새로운 객체를 전달하도록 요청
이전의 props는 버려지고, 자바스크립트 엔진은 기존 props가 차지했던 메모리 회수
⇒ props 변경 시도 ❌

https://ko.react.dev/learn/passing-props-to-a-component