React.js 클래스형 컴포넌트에서 함수형 컴포넌트로 마이그레이션 하기

작성일 : 2024-07-10

React.js 클래스형 컴포넌트에서 함수형 컴포넌트로 마이그레이션 하기

React.js는 현대 웹 애플리케이션 개발을 위한 가장 인기 있는 라이브러리 중 하나입니다. React는 컴포넌트를 기반으로 하는 구조로, 이 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다. 최근에는 함수형 컴포넌트가 주목받고 있으며, 클래스형 컴포넌트에서 함수형 컴포넌트로의 마이그레이션이 권장되고 있습니다. 이번 글에서는 클래스형 컴포넌트에서 함수형 컴포넌트로 마이그레이션하는 방법과 그 이유에 대해 살펴보겠습니다.

클래스형 컴포넌트란?

클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의됩니다. 이를 통해 컴포넌트 생명주기 메서드와 state를 관리할 수 있습니다. 예를 들어, 다음은 기본적인 클래스형 컴포넌트의 예입니다:


javascript
import React, { Component } from 'react';

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

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

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

export default MyComponent;

함수형 컴포넌트란?

함수형 컴포넌트는 단순히 JavaScript 함수를 사용하여 정의되며, props를 인자로 받습니다. 이전에는 상태 관리와 생명주기 메서드를 사용할 수 없어 주로 간단한 컴포넌트에 사용되었지만, React 16.8에서 Hooks가 도입되면서 이제는 상태 관리와 생명주기 메서드도 사용할 수 있게 되었습니다. 즉, 클래스형 컴포넌트가 제공하는 대부분의 기능을 함수형 컴포넌트에서도 사용할 수 있게 된 것입니다.

다음은 위의 클래스형 컴포넌트를 함수형 컴포넌트로 변환한 예입니다:


javascript
import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

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

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

export default MyComponent;

클래스형 컴포넌트에서 함수형 컴포넌트로 마이그레이션 이유

단순성

함수형 컴포넌트는 단순한 구조로, 작성하고 이해하기 쉽습니다. 이는 유지보수를 용이하게 하며 코드를 더 간결하게 만듭니다.

성능 향상

함수형 컴포넌트는 클래스형 컴포넌트보다 메모리 효율성이 높습니다. 이는 렌더링 성능을 향상시키며, 사용자가 느끼는 애플리케이션의 응답 속도를 개선합니다.

테스트 용이성

함수형 컴포넌트는 순수 함수의 특성을 가지기 때문에 유닛 테스트 작성이 더 용이합니다. 이를 통해 코드의 신뢰성과 품질을 높일 수 있습니다.

Hooks의 활용

Hooks는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. Hooks를 사용하면 더 적은 코드로 복잡한 상태 관리를 쉽게 할 수 있으며, 상태를 컴포넌트 바깥으로 추상화하여 코드 재사용성을 높일 수 있습니다.

마이그레이션 단계

클래스형 컴포넌트를 함수형 컴포넌트로 변환하는 과정은 몇 가지 단계로 나눌 수 있습니다:

상태 관리 변경

클래스형 컴포넌트의 state를 사용할 때는 useState Hook을 사용할 수 있습니다. 예를 들어, this.state.count를 useState로 변환하는 방법은 다음과 같습니다:


javascript
const [count, setCount] = useState(this.state.count || 0);

생명주기 메서드 변경

클래스형 컴포넌트의 생명주기 메서드는 여러 가지 Hook으로 대체될 수 있습니다. 다음은 주요 생명주기 메서드와 그에 해당하는 Hook입니다:

componentDidMount -> useEffect(() => {}, [])
componentDidUpdate -> useEffect(() => {}, [dependencies])
componentWillUnmount -> useEffect(() => { return () => {} }, [])

기타 특수한 기능

클래스형 컴포넌트에서 제공하는 기타 기능도 Hook을 통해 구현할 수 있습니다. 예를 들어, useRef Hook을 사용하면 참조를 관리할 수 있으며, useContext Hook을 사용하면 컨텍스트를 사용할 수 있습니다.

마이그레이션 예제

다음은 전체 마이그레이션 과정을 예시로 보여드립니다:

기존 클래스형 컴포넌트를 가져옵니다:


javascript
import React, { Component } from 'react';

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

  componentDidMount() {
    console.log('Mounted');
  }

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

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

export default MyComponent;

기본 구조를 함수형 컴포넌트로 변경합니다:


javascript
import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Mounted');
  }, []);

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

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

export default MyComponent;

결론

클래스형 컴포넌트에서 함수형 컴포넌트로의 마이그레이션은 초기에는 다소 손이 많이 가는 작업일 수 있지만, 장기적으로는 유지보수와 성능 측면에서 많은 이점을 제공합니다. 함수형 컴포넌트와 Hook을 활용하여 React 프로젝트를 더욱 효율적이고 효과적으로 관리해보세요.