UI를 책임이 분명한 함수 컴포넌트로 나누고 조합합니다.
컴포넌트는 대문자로 시작하는 함수이며 JSX를 반환합니다. 페이지를 의미 있는 단위로 나누면 각 부분을 독립적으로 읽고 검증할 수 있습니다.
분리 기준은 줄 수보다 책임과 변경 이유이며 함께 바뀌는 마크업은 가까이 둡니다.
컴포넌트를 일반 함수처럼 호출하지 말고 <CourseCard />로 렌더링해야 Hook 규칙과 생명주기가 유지됩니다.
모든 태그를 컴포넌트로 쪼개면 이동 비용만 늘고 책임은 보이지 않습니다.
로컬 프로젝트에서 확인해보세요CourseCard에 level 입력을 추가해 서로 다른 카드 두 개를 표시하세요.
function CourseCard({ title, level }) {
return (
<article>
<h2>{title}</h2>
<p>{level}</p>
</article>
);
}
export default function App() {
return (
<main>
<h1>학습 대시보드</h1>
<CourseCard title="React" level="기초" />
<CourseCard title="Next.js" level="실무" />
</main>
);
}