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

리액트로 개발하다보면 구글링하다보면 예전 레퍼런스의 경우 대부분 클래스 컴포넌트로 작성이 되어있다.

업무상 활용하는 레퍼런스가 클래스 컴포넌트가 많아서 애를 먹는 경우가 많아서

함수형 컴포넌트와 클래스형 컴포넌트에 대해 간략히 비교해보고, 변환 요령을 정리해보고자 한다.

기본적으로 리액트의 개념을 이해한 분들이 아니면 나중에 읽어보시길 바란다.

우선 클래스 컴포넌트와 함수형 컴포넌트의 예시를 보도록 하자.

---

1. 클래스 컴포넌트

import React, { Component } from 'react';

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

2. 함수 컴포넌트

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

코드로 한눈에 차이가 보인다.

표로 간략히 핵심만 정리 해본다.

유형	클래스	함수
상태관리	this.state/this.setState	useState
라이프사이클	라이프사이클 메서드	useEffect
멤버 변수와 메서드	클래스 내부에 선언	컴포넌트 함수 내 선언
변수 접근	this키워드로 접근	직접 변수/함수에접근
JSX	render메서드	컴포넌트 함수 내 JSX 반환

3. 변환 팁 (클래스->함수)

3.1. 초기화

클래스형에서 constructor에 해당하는 초기화 내용들은 useState훅의 초기화에 해당한다.
위 예시에서

// 클래스형 컴포넌트
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }


// 함수형 컴포넌트
const [count, setCount] = useState(0);

로 간략히 변경된다.

3.2. 함수

// 클래스형 컴포넌트
 increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

// 함수형 컴포넌트
  const increment = () => {
    setCount(count + 1);
  };

  또는

  function increment() {
    setCount(count + 1);
  }

함수의 경우엔 클래스형 컴포넌트에서 선언되는 함수선언부를 화살표함수나 function을 이용해서 변환한다.

3.3. JSX

JSX의 경우엔 클래스형은 render(){return()}를 반드시 명시해줘야 한다.
함수형은 함수의 return 으로 반환하면 된다.

//클래스형 컴포넌트
render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }

//함수형 컴포넌트
 return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );

또 하나의 차이는 변수나 함수에 접근시 클래스 컴포넌트엔 this로 접근해야 한다는 점.
함수형 컴포넌트는 직접 접근이 가능하다.