React - 함수형 컴포넌트 vs 클래스형 컴포넌트

함수형 컴포넌트 vs 클래스형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트는 리액트 초창기부터 사용되었으며, 상태(state)와 라이프사이클 메서드를 사용할 수 있다. 클래스형 컴포넌트는 React.Component를 상속받아 정의된다.

• 예시:

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
  
    componentDidMount() {
      console.log('Component did mount');
    }
  
    handleClick = () => {
      this.setState({ count: this.state.count + 1 });
    }
  
    render() {
      return (
        <div>
          <p>Count: {this.state.count}</p>
          <button onClick={this.handleClick}>Increment</button>
        </div>
      );
    }
  }

함수형 컴포넌트

함수형 컴포넌트는 단순히 함수로 정의되며, 이전에는 상태나 라이프사이클 메서드를 사용할 수 없었다. 하지만, 리액트 훅의 도입으로 함수형 컴포넌트에서도 상태와 사이드 이펙트를 관리할 수 있게 되었다.

• 예시:

  import React, { useState, useEffect } from 'react';
  
  const MyComponent = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      console.log('Component did mount');
    }, []);
  
    const handleClick = () => {
      setCount(count + 1);
    };
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment</button>
      </div>
    );
  };
  
  export default MyComponent;

클래스형 컴포넌트를 함수형 컴포넌트로 대체하는 이유

1. 코드 간결성: 함수형 컴포넌트는 클래스형 컴포넌트보다 코드가 간결하고 이해하기 쉽다. 상태 관리와 라이프사이클 메서드가 복잡한 클래스 문법 없이 간단한 함수로 구현된다.
2. 리액트 훅: 리액트 훅(Hooks)이 도입되면서 함수형 컴포넌트에서도 상태와 사이드 이펙트를 관리할 수 있게 되었다. 이는 클래스형 컴포넌트의 주요 기능을 대체한다.
3. 함수형 프로그래밍 장점: 함수형 컴포넌트는 함수형 프로그래밍의 장점을 활용할 수 있다. 예를 들어, 순수 함수, 불변성 등을 쉽게 적용할 수 있다.
4. 성능 향상: 함수형 컴포넌트는 메모리 사용 측면에서 더 효율적일 수 있으며, React의 Concurrent Mode와 같은 최적화 기능과 더 잘 호환된다.

주요 리액트 훅

리액트 훅 중에서 중요한 역할을 하는 몇 가지 훅이 있다.
1. useState: 상태 관리를 위해 사용되고, 클래스형 컴포넌트의 this.state와 this.setState를 대체한다.

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

2. useEffect: 사이드 이펙트를 관리하기 위해 사용된다. 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체한다.

   useEffect(() => {
     console.log('Component did mount');
     return () => {
       console.log('Component will unmount');
     };
   }, []);

3. useContext: 컨텍스트를 쉽게 사용하기 위해 사용된다. 클래스형 컴포넌트의 contextType이나 Context.Consumer를 대체한다.

   const value = useContext(MyContext);

결론

리액트 훅의 도입으로 함수형 컴포넌트는 상태 관리와 사이드 이펙트 처리 등 클래스형 컴포넌트의 기능을 모두 수행할 수 있게 되었다. 이는 더 간결하고 이해하기 쉬운 코드를 작성할 수 있게 하며, 함수형 프로그래밍의 장점을 활용할 수 있게 한다.