Post

REACT) 함수형 vs 클래스형에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 8 min read

리액트 함수형 vs 클래스형 컴포넌트: 비교와 선택

리액트(React)는 컴포넌트 기반의 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 널리 사용됩니다. 리액트 컴포넌트는 크게 함수형 컴포넌트(Function Component)와 클래스형 컴포넌트(Class Component)로 나뉩니다. 이 글에서는 두 가지 유형의 컴포넌트를 비교하고, 각각의 장단점과 사용 예제를 통해 어떤 상황에서 어떤 유형을 선택하는 것이 적절한지 알아보겠습니다.

함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수로 정의되며, 리액트 16.8 버전에서 도입된 훅(Hook)을 사용하여 상태와 라이프사이클 기능을 처리할 수 있습니다. 간단한 문법과 성능상의 장점으로 인해 현대 리액트 개발에서 선호되고 있습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

코드 복사
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default Counter;

장점

  1. 간단한 문법: 함수형 컴포넌트는 클래스 구문 없이 함수로 정의되므로 코드가 간결합니다.
  2. Hooks 사용: useState, useEffect 등의 훅을 사용하여 상태와 라이프사이클을 관리할 수 있습니다.
  3. 성능: 클래스형 컴포넌트보다 메모리 사용이 적고, 컴파일러 최적화가 용이합니다.
  4. 테스트 용이성: 함수형 컴포넌트는 순수 함수처럼 동작하므로, 테스트가 상대적으로 쉽습니다.

단점

  1. 복잡한 상태 관리: 상태가 복잡해질수록 훅을 관리하는 로직이 복잡해질 수 있습니다.
  2. 초기 학습 곡선: 기존 클래스형 컴포넌트에서 함수형 컴포넌트로 전환할 때 훅의 사용법을 익히는 데 시간이 필요할 수 있습니다.

클래스형 컴포넌트

클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의됩니다. 리액트의 초기 버전부터 사용된 전통적인 방식으로, 상태(state)와 라이프사이클 메서드(lifecycle method)를 포함할 수 있습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React, { Component } from 'react';

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

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  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;

장점

명확한 라이프사이클 메서드: componentDidMount, componentDidUpdate 등 명확한 라이프사이클 메서드를 통해 컴포넌트의 생명주기를 관리할 수 있습니다.

  1. 기존 코드와의 호환성: 기존의 클래스형 컴포넌트를 사용하는 프로젝트와의 호환성이 좋습니다.
  2. 상태 관리 용이: 복잡한 상태 관리가 함수형 컴포넌트보다 직관적일 수 있습니다.

단점

  1. 복잡한 문법: 클래스 구문과 라이프사이클 메서드로 인해 코드가 길어지고 복잡해질 수 있습니다.
  2. 성능: 함수형 컴포넌트보다 메모리 사용이 많고, 최적화가 어려울 수 있습니다.
  3. this 바인딩: 클래스 메서드 내에서 this 키워드를 적절히 바인딩해야 하는 문제점이 있습니다.

함수형 vs 클래스형: 언제 무엇을 사용할까?

1. 함수형 컴포넌트를 사용하는 경우

  • 간단한 컴포넌트: 상태 관리가 간단하고, 라이프사이클 메서드를 많이 사용하지 않는 경우 함수형 컴포넌트가 적합합니다.
  • Hooks 활용: 훅을 사용하여 상태와 효과를 관리할 수 있습니다.
  • 최신 리액트 프로젝트: 새로운 프로젝트를 시작하거나 최신 리액트 기능을 사용하고자 할 때 함수형 컴포넌트가 더 적합합니다.

    2. 클래스형 컴포넌트를 사용하는 경우

  • 복잡한 상태 관리: 상태 관리가 복잡하고, 여러 라이프사이클 메서드를 사용해야 하는 경우 클래스형 컴포넌트가 더 직관적일 수 있습니다.
  • 기존 코드베이스: 기존 프로젝트가 클래스형 컴포넌트를 주로 사용하고 있다면 일관성을 유지하기 위해 클래스형 컴포넌트를 사용하는 것이 좋습니다.
  • 명확한 라이프사이클: 컴포넌트의 생명주기를 명확히 관리해야 하는 경우 클래스형 컴포넌트가 유리합니다.

결론

리액트 컴포넌트에는 함수형과 클래스형 두 가지 주요 유형이 있으며, 각각의 장단점과 적합한 사용 사례가 있습니다. 함수형 컴포넌트는 간단한 문법과 훅을 활용한 유연한 상태 관리를 제공하며, 최신 리액트 프로젝트에서 널리 사용됩니다. 반면에 클래스형 컴포넌트는 명확한 라이프사이클 메서드와 복잡한 상태 관리를 지원하지만, 문법이 복잡하고 성능 측면에서 다소 불리할 수 있습니다.

프로젝트의 요구 사항과 팀의 기술 스택에 따라 적절한 컴포넌트 유형을 선택하는 것이 중요합니다. 리액트의 다양한 기능을 잘 활용하여 효율적이고 유지보수 가능한 코드를 작성해보세요.

REACT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github