React_프롭스(props)란?

Props(properties, 속성)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법으로 컴포넌트의 재사용성을 높일 수 있다.

🎯 Props의 특징

• props는 키와 값을 모두 가진 하나의 객체형태로 전달된다.
• 부모에서 자식 방향으로만 데이터 전달이 가능하다.(단방향 데이터 흐름)
• 읽기 전용으로 컴포넌트 내부에서 직접 변경할 수 없다.
• 부모에서 초기값을 변경해도, 한 번 useState의 초기값으로 설정된 자식의 상태는 자동으로 업데이트되지 않는다! 만약 부모의 props 변경이 자식 컴포넌트의 상태에 반영되도록 하려면 useEffect를 사용해야한다.

🤔 왜 props는 왜 단방향(부모 → 자식)으로만 전달되는걸까?

• ✅ 단방향 데이터 흐름을 유지하면 어떤 데이터가 어디서 변경되는지 추적이 쉽다.
• ✅ React에서 부모가 상태를 변경하면, 그 상태를 사용하는 자식만 DOM이 변경된다. (상태를 사용하는 최소한의 컴포넌트만 다시 그려 불필요한 DOM 업데이트 및 변경을 방지) 때문에 성능 최적화 및 버그 방지에 효율적이다.

✅ 리액트에서 props 전달 방법

Props 는 자동으로 적용되거나 해당 컴포넌트 속 JSX 코드로 넘어가지 않음!

1. forwarded props (전달 속성)

자식 컴포넌트가 받은 모든 props를 그대로 하위 요소에 전달하는 방식 {…props}

2. proxy props (대리 속성)

특정 props를 선택적으로 전달하거나, 변형하여 전달하는 방식 {title, content}

//{...props} 모두 다른 props를 모아와서 props object로 병합,객체상태로 컴포넌트로 들어옴!
function CustomButton({ title, ...props }) {
  const upperText = title.toUpperCase(); //특정 속성으로 들어온 props를 변형
  return <button {...props}>{upperText}</button>;
}

🔗 React 컴포넌트에 props 전달하기