컴포넌트?

• UI 요소로서 독립적이고 재사용가능한 코드 블럭

• 모델-뷰-컨트롤러(MVC) 설계 지침에 따라 구현된 클래스여야 함

  • model - 앱의 데이터 부분
  • view - 모델을 화면에 렌더링하는 부분
  • controller - 사용자의 키보드와 마우스 입력을 수신받아 모델과 뷰에 적절한 형태로 반영

• 종류

  • 클래스 컴포넌트 : 상속, 다른 컴포넌트 데이터 접근
  • 함수 컴포넌트 : property를 받아들이고 리액트 요소로 반환

<aside> ✅ 리액트 훅이라는 새로운 메커니즘을 이용해, 클래스가 아닌 단순 함수 형태의 컴포넌트를 구현할 수 있게 되었다.

</aside>

프로젝트 생성: 리액트 컴포넌트의 기본 개념과 컴포넌트 두 종류 구현

npx create-react-app <프로젝트명> --template-typescript

cp -r ../<이전프로젝트명>/src/data ./src/data

cp -r ../<이전프로젝트명>/.* .

npm i chance luxon

npm i -D @types/chance @types/luxon

npm start

리액트에서 컴포넌트의 의미

(1) 리액트 프레임워크가 제공하는 리액트 컴포넌트 (2) 사용자가 구현하는 사용자 컴포넌트

(1) 리액트 컴포넌트

• 리액트 컴포넌트의 이름은 첫 글자를 소문자로 한다. ex) div, h1

<aside> ✅ 리액트는 HTML5의 각 태그에 대응하는 리액트 컴포넌트를 제공한다.

</aside>