대문자 이름
JSX가 직접 만든 컴포넌트로 인식하도록 이름을 대문자로 시작합니다.
컴포넌트 경계는 이름, 입력, 출력으로 드러난다
UI를 분리할 때는 파일을 나누는 것보다 이 조각이 어떤 역할을 하고 어떤 데이터를 받아 그리는지 먼저 정리합니다.
외부 입력
제목, 가격, 상태처럼 바깥에서 달라지는 값은 props로 받습니다.
화면 출력
컴포넌트는 받은 데이터를 바탕으로 하나의 UI 조각을 반환합니다.
반복 사용
같은 구조에 데이터만 바뀌면 컴포넌트 하나가 여러 위치의 화면 조각을 맡습니다.