[리액트] 클래스형, 함수형 컴포넌트 차이 간단 정리

리액트 컴포넌트를 만드는 두가지 방식이 있다. - 클래스 컴포넌트와 함수 컴포넌트.

 

생김새

- 클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

- 함수 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

함수형 컴포넌트가 클래스형보다 더 간단하다.

하지만 함수형이 클래스형보다 뒤늦게 나온거라 클래스형으로 작성 된 프로젝트가 많이 존재한다.

-> 유지보수를 위해서 클래스 컴포넌트를 알아둬야 한다.

 

특징

- 클래스 컴포넌트

• Component로부터 상속을 받아야한다.
• class 키워드가 필요하다.
• render()가 필수적이다.
• state와 라이프사이클 API를 사용할 수 있다.

- 함수 컴포넌트

• 클래스형 컴포넌트보다 선언하기 수월하다.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• state, 라이프사이클 API를 사용할 수 없다 -> React Hooks을 통해 해결 할 수 있음