Class Component

ES6에서 제공되는 클래스 문법을 이용해 렌더링 될 컴포넌트를 정의하는 방법

render( ) 함수는 반드시 작성되어야 하며, 반환값으로는 렌더링 될 리액트 엘리먼트를 정의한다.

→ 일반적으로 JSX 사용

JSX만으로도 리액트 엘리먼트를 정의할 수 있지만 클래스형으로 컴포넌트를 작성하게 되면 여러가지 장점이 있다.

중복되는 엘리먼트들을 추상화해서 컴포넌트로 작성하고, 작성된 컴포넌트를 재사용하는 것이 리액트가 추구하는 한 가지 방향

컴포넌트를 정의하는 방법은 현재 두 가지 방식을 제공한다.

클래스형 컴포넌트와 함수형 컴포넌트이다.

사용하는 것은 함수형 컴포넌트가 더 간결하고 선언하기도 편하며, 메모리도 덜 사용하기에 더 권장되는 방식

하지만 state사용 및 라이프 사이클 기능, 임의의 메소드 정의 등은 클래스 컴포넌트에서만 사용 가능한 방식이다.

• 이러한 함수형 컴포넌트의 기능적 한계로 훅스(hooks)를 제공하고 있다.

class Title extends React.Component {
    render() {
        return (
            <h1>Class Componenet</h1>
        );
    }
}
ReactDOM.createRoot(document.getElementById('root')).render(<Title/>);

• 렌더링 부분에서 사용자 정의 함수처럼 class를 사용할 수 있다.
  1. 앞글자 대문자
  2. 닫기 태그 존재
  3. 클래스나 함수 이름과 동일해야 함

Function Component

함수형 컴포넌트는 간결하게 작성이 가능하다.

함수의 반환값으로 ReactElement만 정의해서 반환하면 된다.

• 일반적으로 JSX 사용

함수형 컴포넌트 작성 시 유의사항은 앞 글자를 대문자로 정의해야 한다는 것이다.

• 사용자 정의 엘리먼트를 이용할 시 <Title/> 이런 형태로 사용하게 되는데, 앞 글자가 소문자이면 html로 인식하게 되고 존재하지 않는 html 태그 엘리먼트이기 때문에 제대로 그려지지 않는다.