[React] 클래스형 VS 함수형 컴포넌트

1. 클래스형 / 함수형 컴포넌트

• 클래스형 컴포넌트
  - 전통적인 방식
  - 리액트에서 컴포넌트를 작성할 때 Component를 상속 받아 작성하는 방법
  - 즉, 클래스 형식으로 컴포넌트를 작성하는 방법
• 함수형 컴포넌트
  - 버전 16.8부터 Hook 지원
  - 자바스크립트 특성인 함수형 개발 방법을 이용하는 컴포넌트를 함수형으로 작성하는 방법

2. 클래스형 / 함수형 컴포넌트 특징

• 클래스형 컴포넌트 특징
  - class 키워드로 시작
  - Component를 상속 받음
  - render() 함수를 사용해서 JSX를 반환
  - props를 조회할 때 this 키워드를 사용
• 함수형 컴포넌트 특징
  - JSX를 return 문을 사용해서 반환
  - state를 사용할 수 없음
  - 생명주기 함수를 작성할 수 없음

3. 클래스형 / 함수형 컴포넌트 작성법

// 클래스형 컴포넌트 작성법
export default class Day03A1 extends React.Component {
    render() {
        return (
            <div>
                <div>Hello</div>
                <div>World</div>
            </div>
        )
    }
}

// 함수형 컴포넌트 작성법
export default function Day03A1() {
    return (
            <div>
                <div>Hello</div>
                <div>World</div>
            </div>
        )
    }
}

4. 클래스형 컴포넌트 사용 예시

- import를 하는 부분에서 React는 React의 전부를 import를 하는 뜻으로 React.Component로 해야 Component를 상속 받을 수 있다.

- {Component} 는 React 중에 Component 만을 import를 하겠다는 뜻으로 그냥 Component로 써도 가능하다.

- 클래스형 이기 때문에 생명주기 함수를 사용가능하고 state도 사용 가능하다.

- 그리고 부모 컴포넌트에서 오는 props 또한 사용 가능하다. 

5. 함수형 컴포넌트 사용 예시

- 클래스형 처럼 따로 상속받거나 import를 할 필요가 없다.

- 함수형 컴포넌트는 따로 render 함수를 쓰지 않고 바로 return으로 반환한다.

- props는 사용이 가능하지만 state는 클래스형 처럼 바로 사용하지 못하며 생명주기 메소드도 사용하지 못한다.

- state를 사용하기 위해서는 React Hook인 useState를 사용하면 되는데 그것은 React Hook에서 설명하겠다.

- 클래스형과 다르게 이벤트 함수를 쓸때는 이벤트 함수 앞에 const나 var를 붙여줘야 한다.

- 그리고 사용할 때는 class가 아니기 때문에 this.함수명이 아닌 그냥 함수명으로 쓴다.