부모가 자식에게 읽기 전용 입력을 전달합니다.
props는 부모가 자식의 표시와 동작을 설정하는 입력입니다. 자식은 props를 바꾸지 않고 변경 의도를 콜백으로 부모에 알립니다.
구조 분해와 기본값으로 필요한 입력을 명확히 하고 boolean 이름은 completed처럼 의미가 드러나게 작성합니다.
객체와 배열 props도 내부를 수정하지 말고 소유자인 부모가 새 값을 만들어 갱신합니다.
props를 state에 무조건 복사하면 두 값의 동기화 기준이 모호해집니다.
로컬 프로젝트에서 확인해보세요featured prop을 추가해 대표 강좌에만 별표를 표시하세요.
function Course({ title, level = "입문", completed = false }) {
return (
<article>
<h2>{title}</h2>
<p>
{level} · {completed ? "완료" : "학습 중"}
</p>
</article>
);
}
export default function App() {
return (
<main>
<Course title="React 상태" level="기초" />
<Course title="React 배포" completed />
</main>
);
}