React Hook 의 등장 배경

리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.

리액트 초기에는 일반적으로 함수형 컴포넌트를 사용했으나, state나 생명주기를 사용해야할 때는 클래스형 컴포넌트를 사용했다.

그러나 클래스 형 컴포넌트 사용에는 단점이 있었기에, 이를 보완하여 함수형 컴포넌트를 사용할 수 있도록 등장하는 것이 React Hook(리액트 훅)이다.

클래스형 컴포넌트

• state와 Lifecycle API 사용이 가능하다.
• 임의 메서드를 정의할 수 있다.

함수형 컴포넌트

• state와 LifeCycle API 사용이 가능하다.
• 클래스형 컴포넌트보다 선언하기 편하다.
• 빌드 결과물의 크기가 클래스형 컴포넌트보다 작다.

선언 방식의 차이점

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const text = 'Hi Jimin'
    return <div className='react'>{text}</div>
  }
}

export default App;

• class 키워드 필요
• Component를 상속 받아야함.
• 화면에 표시하기 위해서 render() 메서드 필요

함수형 컴포넌트

import React from 'react';

const App = () => {
  const text = 'Hi Jimin'
  return <div className='react'>{text}</div>
}

export default App;

• class형 컴포넌트와 비교했을 때 훨씬 간결한 코드
• 함수 자체가 render 함수라 render() 메서드 사용 X
• Component 상속 X