TIL 25 | [React] 클래스형 vs 함수형

리액트를 사용하여 프론트 개발을 할 때 우리는 두가지 방법으로 컴포넌트 선언을 할 수 있다.
과거에는 클래스형 컴포넌트를 주로 사용했지만 2019년 v16.8이 나온 이후 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주면서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용하는 것을 권장하고 있다.

콕 찝어서 어떤 한가지 방법이 더 좋다고 하기보다는 두가지 방법에 대해 모두 다 잘 알고 있으면서 각각의 방법을 필요한 상황에 맞게 사용하는 것이 중요하다.

컴포넌트

컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행한다.

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>
      </div>;
  }
}

export default App;

함수형 컴포넌트

import React from 'react';

function App() {
  return <div>
    </div>;
}

export default App;

차이점

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만 클래스형 컴포넌트의 경우 state 기능과 라이프사이클 기능을 사용할 수 있다는 것, 임의 메서드를 정의할 수 있다는 것이 차이점이다. 또한 클래스형 컴포넌트에서는 render 함수가 꼭 필요하고 그 안에서 보여 주어야 하는 JSX를 반환해야 한다.
반면에 함수형 컴포넌트의 장점은 클래스형 컴포넌트보다 선언하기가 편하다는점, 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용한다는 점, 프로젝트를 완성하여 빌드한 후 배포할 때 결과물의 파일 크기가 더 작다는 점이 있고 주요 단점으론 state와 라이프사이클 API의 사용이 불가능하다는 점이 있었다. 그러나 이 단점은 위에서 말했듯이 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다.

props 값 전달받기

클래스형

클래스형 컴포넌트에서는 부모 컴포넌트에서 정의한 props 값을 {this.props.props이름} 으로 받아서 나타낸다.

함수형

함수형 컴포넌트에서는 부모 컴포넌트에서 정의한 props 값을 함수의 인자 값(=parameter)으로 받아온다. 즉 부모 컴포넌트에서 전달 받은 props 값을 컴포넌트의 인자로 설정하여 함수 내부에 props 값을 전달해서 화면에 나타나게 한다.

state 값 사용하기

클래스형

클래스 내에 초기값을 설정해서 사용한다. state 값을 사용할 때는 {this.state.state의 속성명} 로 state 값을 사용할 수 있다. 또한 setState를 통해 state 의 값을 변경할 수 있다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  ...

함수형

함수형 컴포넌트에서는 hook을 통해 state값을 사용할 수 있다. 아래와 같은 함수형 컴포넌트에서 number라는 state와 setNumber라는 state 변경함수를 useState를 통해 선언하고 useState를 사용하여 얻은 함수(setNumber)에서는 원하는 값을 인자로 전달합니다. 이를 통해 state의 선언과 변경과정이 매우 간소화된다.

const React, { useState } from 'react';

const Counter = () => {
  
  const [number, setNumber] = useState('');
  ...
}