[클래스 컴포넌트와 함수 컴포넌트] 리액트의 컴포넌트

728x90

클래스 컴포넌트와 함수 컴포넌트 

React에서는 컴포넌트를 클래스 컴포넌트와 함수 컴포넌트, 두 가지 방식으로 정의할 수 있습니다. 두 컴포넌트는 모두 동일한 기능을 할 수 있지만, 내부적으로 처리되는 방식이 다르며, 최신 React에서는 함수 컴포넌트가 많이 선호되고 있습니다. 그 이유는 더 간단하고 직관적이며, 훅(Hooks)을 사용할 수 있기 때문입니다.

 

---

1.  클래스 컴포넌트

클래스 컴포넌트는 React.Component를 상속받는 ES6 클래스로 정의된 컴포넌트입니다. 상태 관리와 라이프사이클 메서드를 사용할 수 있습니다.

클래스 컴포넌트의 기본 구조

import React, { Component } from 'react';

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

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

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

export default MyComponent;

클래스 컴포넌트 특징

• 상태 관리 : this.state를 사용하여 컴포넌트의 상태를 관리합니다.
• 라이프사이클 메서드 : 컴포넌트가 생성, 업데이트, 삭제되는 시점에 호출되는 메서드를 제공합니다. 예: componentDidMount, componentDidUpdate, componentWillUnmount 등)
• this 바인딩 필요 : 이벤트 핸들러나 메서드에서 this를 바인딩해야 할 때가 있습니다.

 

---

2.  함수 컴포넌트

함수 컴포넌트는 단순한 함수로 정의되는 컴포넌트입니다. 초기에는 상태 관리나 라이프사이클 메서드를 사용할 수 없었지만, React의 훅(Hooks)을 통해 이러한 기능들이 가능해졌습니다.

함수 컴포넌트의 기본 구조

import React, { useState } from 'react';

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

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

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

export default MyComponent;

함수 컴포넌트 특징

• 상태 관리 : useState 훅을 사용하여 상태를 관리합니다.
• 라이프사이클 메서드 : useEffect 훅을 사용하여 컴포넌트의 생명주기에 따라 코드 실행을 제어할 수 있습니다.
• this 바인딩 없음 : 함수 컴포넌트는 this를 사용하지 않기 때문에 바인딩을 신경 쓸 필요가 없습니다.
• 간결한 문법 : 함수 형태로 작성되어 코드가 간결하고 이해하기 쉽습니다.

 

---

3.  클래스 컴포넌트 vs 함수 컴포넌트 비교 표

항목	클래스 컴포넌트	함수 컴포넌트
구조	ES6 클래스	일반 함수
상태 관리	this.state, this.setState	useState 훅
라이프사이클 메서드	componentDidMount, componentDidUpdate 등	useEffect 훅
this 사용	필요 (바인딩)	필요 없음
간결성	코드가 다소 길어짐	더 간결하고 읽기 쉬움
성능	비교적 무겁고 복잡	가벼움, 특히 React 16.8 이후 성능 최적화가 뛰어남
훅 사용 가능 여부	불가능	가능 (useState, useEffect, useContext 등)

 

---

4.  함수 컴포넌트와 훅(Hooks)

React 16.8부터 훅(Hooks)이 도입되면서, 함수 컴포넌트에서도 상태 관리와 라이프사이클 메서드를 사용할 수 있게 되었습니다. 대표적인 훅에는 useState, useEffect, useContext 등이 있습니다.

useState 예시

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // count 상태와 setCount 업데이트 함수

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

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

export default Counter;

useEffect 예시

useEffect 는 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 를 대체합니다.

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);  // 컴포넌트가 언마운트될 때 클린업
  }, []);  // 빈 배열을 전달하면, 컴포넌트가 마운트될 때만 실행됨

  return <p>{seconds} seconds</p>;
};

export default Timer;​

 

---

5.  마무리

언제 클래스 컴포넌트를 사용하고, 언제 함수 컴포넌트를 사용해야 할까?

• 클래스 컴포넌트는 예전 React 코드에서 많이 사용되었지만, 최신 프로젝트에서는 대부분 함수 컴포넌트로 대체되고 있습니다. 다만, 기존 코드 유지보수나 외부 라이브러리에서 클래스 컴포넌트를 사용할 때는 여전히 필요할 수 있습니다.

• 함수 컴포넌트는 코드가 간결하고, 훅(Hooks)을 통해 상태 관리와 라이프사이클 관리까지 할 수 있어 최신 React 코드에서 많이 사용됩니다.

React의 최신 버전에서는 함수 컴포넌트를 사용하는 것이 권장됩니다. 함수 컴포넌트는 간결하고 효율적이며, 더 나은 성능과 최적화를 제공합니다.

함께 보면 좋은 자료

블로그 글 :

[React Hooks] useState부터 커스텀 훅까지

 

---

반응형