Component 만들기 및 렌더링

Component 만드는 방법

• Component = Function Component 함수 컴포넌트 + Class Component

 

Function Component 함수 컴포넌트

: 간단한 코드를 장점으로 가짐

 

Class Component

: JavaScript ES6의 class 라는 것을 사용해서 만들어진 형태의 컴포넌트

리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다.

 

Component 이름 짓는 방법

• Component 이름은 항상 대문자로 시작해야 한다!

cause, react는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문

 

const element = <div />;

-> HTML div 태그로 인식

const element = <Welcome name = "인제" />;

-> Welcome이라는 리액트 Component로 인식

 

Component 렌더링

: 컴포넌트로부터 엘리먼트를 만들어야 함