클래스 컴포넌트와 함수형 컴포넌트의 차이가 무엇인가요?

React에서는 주로 두 가지 유형의 컴포넌트를 사용하여 UI를 만듭니다: 클래스 컴포넌트와 함수형 컴포넌트입니다.

클래스 컴포넌트

클래스 컴포넌트: 이들은 ES6의 클래스를 기반으로 생성됩니다. 클래스 컴포넌트는 React의 라이프사이클 메소드에 접근할 수 있으며, this.state를 통해 내부 상태를 가질 수 있습니다. 이 상태는 this.setState 메소드를 통해 변경할 수 있습니다. 클래스 컴포넌트는 복잡한 기능을 가진 컴포넌트를 만들 때 많이 사용됩니다.

예시:

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

  render() {
    return (
      <div>
        Count: {this.state.count}
      </div>
    );
  }
}

함수형 컴포넌트

함수형 컴포넌트: 이들은 간단한 자바스크립트 함수 또는 ES6의 화살표 함수를 이용해 만들어집니다. 초기에는 단순히 props를 받아서 렌더링할 요소를 반환하는 데 사용되었습니다. 그러나 React Hooks의 도입 이후로 함수형 컴포넌트에서도 상태 관리와 라이프사이클 메소드를 활용할 수 있게 되었습니다.

예시:

function MyComponent(props) {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      Count: {count}
    </div>
  );
}

두 컴포넌트 간 차이점

주요한 차이점은 다음과 같습니다:

1. 구조: 클래스 컴포넌트는 클래스를 기반으로 하며, 함수형 컴포넌트는 함수를 기반으로 합니다.

2. 상태 관리: 클래스 컴포넌트는 this.state와 this.setState를 사용하여 상태를 관리합니다. 반면 함수형 컴포넌트는 상태를 가지지 못하다가, React Hooks가 도입된 이후 useState Hook을 통해 상태를 관리할 수 있게 되었습니다.

3. 라이프사이클 메소드: 클래스 컴포넌트는 라이프사이클 메소드를 가집니다(componentDidMount, componentDidUpdate, componentWillUnmount 등). 이에 반해 함수형 컴포넌트는 원래 라이프사이클 메소드를 가지지 않았지만, React Hooks의 useEffect를 통해 비슷한 기능을 구현할 수 있게 되었습니다.

4. this 키워드: 클래스 컴포넌트에서는 this 키워드를 사용해야 합니다. 반면 함수형 컴포넌트에서는 this 키워드가 없습니다.

React 개발팀은 새로운 컴포넌트를 만들 때 함수형 컴포넌트와 Hooks를 사용하는 것을 권장하고 있습니다. 이는 함수형 컴포넌트가 더 간결하고 이해하기 쉬울 뿐만 아니라, 클래스 컴포넌트의 모든 기능을 Hooks를 통해 사용할 수 있기 때문입니다.