📌 개념

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

📌 4가지 특성

1. 구조 분해 구문

• props를 선언할 때 소괄호 안에 중괄호 쌍을 넣어 표현 (객체의 구조 분해 할당 이용)
• 구조 분해 할당을 하는 이유: props가 자식에 전달될 때 props.person으로 전달되는데 이를 구조 분해하면 ({ person }) 과 같은 형태가 됨

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

// 위 코드를 구조 분해 할당
function Avatar({ person, size }) {
  // ...
}

2. children을 이용한 부모와 자식 관계

• 부모 <Card>는 자식인 children(<Avatar>) 내부에서 무엇이 렌더링되는지 "알아야 할" 필요가 없음

import Card from './Card.js';
import Avatar from './Avatar.js';

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

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

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

• children이라는 prop은 부모 컴포넌트가 임의의 JSX로 채울 수 있는 '구멍'
• Pannel, Grid 등의 시각적 Wrapper에 이러한 '유연한' 패턴 사용

3. 시간에 따라 변화 가능

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

• props는 시간이 지나면서 변화할 수 있음
  • time은 매 초마다 변경되고, color는 (부모에서) 다른 색상을 선택하면 변경됨

🙋‍♀️ 하지만!!

• 이때 변화하는 props는 부모의 state 수정으로 변경된 것
  • 자식에서 직접 변경된 것이 아님

• 선택한 색을 변경하는 등 사용자 입력에 반응하는 것은 부모의 state를 setState 메서드로 변경했을 때만 가능
• 이러한 특징으로 props는 첫 렌더링 때만 컴포넌트의 데이터를 반영하는 것이 아니라 모든 시점에 데이터 반영 가능

4. 데이터 특징에 따른 불변성

• 위에서처럼 Props는 부모의 state 수정을 통해 변경 가능
  • 하지만 기본적인 정의 상으로는 "불변성"을 가지고 있음

props는 컴퓨터 공학에서 “변경할 수 없다”는 뜻의 용어

• 컴포넌트가 props를 변경해야 하는 경우(예: 사용자 상호작용, 새로운 데이터에 대한 응답 등) 부모 컴포넌트에 다른 props, 즉 완전히 새로운 객체를 전달
• 결과: 이전의 props는 '버려지고'(참조를 끊음), 새 props로 리렌더링을 수행한 뒤 기존 props가 차지했던 메모리를 자바스크립트 엔진이 회수(가비지 컬렉팅, GC)