COMPONENT MODEL

React 컴포넌트는 UI를 재사용 가능한 조각으로 나누는 기준이다

큰 화면을 한 번에 만들기보다 역할이 분명한 컴포넌트로 쪼개면 재사용, 수정, 테스트가 쉬워진다. 현대 React는 함수형 컴포넌트를 기본으로 본다.

페이지를 컴포넌트로 나누기

App

전체 화면을 조립하는 최상위 컴포넌트.

Header

로고, 검색, 로그인처럼 상단 기능을 담당한다.

ProductList

여러 ProductCard를 데이터 개수만큼 반복한다.

ProductCard

이미지, 이름, 가격, 버튼을 가진 재사용 단위.

함수형

함수가 JSX를 반환한다. Hooks와 함께 현대 React의 기본 작성 방식이다.

클래스형

React.Component를 상속하고 render 메서드에서 JSX를 반환한다.

이름 규칙

컴포넌트 이름은 대문자로 시작해야 JSX가 HTML 태그와 구분한다.

props

부모가 자식에게 데이터를 전달하는 입력값으로 읽는다.

재사용 기준여러 곳에서 반복되는 버튼, 카드, 입력 영역은 분리한다.

복잡도 기준파일이 길어지면 역할별 컴포넌트로 쪼갠다.

업데이트 기준데이터 변화에 따라 독립적으로 바뀌는 영역은 분리하기 좋다.