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

react에서 컴포넌트를 만드는 방법에는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.

현재는 나도 그렇고 많은 개발자들이 함수형 컴포넌트로 개발을 진행하지만 리엑트의 기본원리나 라이프사이클을 알기 위해서는 클래스형 컴포넌트에 대해서도 알고 있어야 하기에 오늘 정리해보려고 한다.

클래스형 컴포넌트

1. class 키워드가 반드시 필요하다 
    (class로 컴포넌트 정의)
2. render() 메소드가 반드시 필요하다
3. Component를 상속(extends)받아야 한다.
4. props를 받아올 때 this.props로 값을 불러올 수 있다

클래스형 컴포넌트는 기본적으로 state, lifeCycle 관련 기능 사용이 가능하다. 하지만 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다는 특징이 있다.

// 클래스형 컴포넌트

class ClassComponent extends Component {
  state = { count: 0 }
  
  increase = () => {
    this.setState(({ count }) => ({ count: count + 1 })
  }
  
  render() {
    return (
      <div>
        <p>count: {this.state.count}</p>
        <button onClick={this.increase}>INCREASE</button>
      </div>
    )
  }
}

함수형 컴포넌트

props를 불러올 필요 없이 바로 호출이 가능하다.

함수형 컴포넌트는 현재는 hook을 통해 해결됐지만 state, lifeCycle 관련 기능 사용이 불가능했었다. 컴포넌트 선언에 좀 더 편리하며 메모리 자원을 클래스형 보다 덜 사용한다는 특징이 있다.

// 함수형 컴포넌트

function FunctionComponent(props) {
  const [count, setCount] = useState(props.count)

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

간략한 예시만 확인해도 함수형 컴포넌트가 더 가독성 있게 짧은 코드로 완성이 되는 것을 볼 수 있다.

---

Q. 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 말해주세요

A.
클래스형 컴포넌트, 함수형 컴포넌트는 리엑트에서 컴포넌트를 만드는 방식입니다.

이 둘은 컴포넌트를 만든다는 같은 역할을 하지만 상태와 생명주기를 다루는 방식에서 가장 큰 차이를 보입니다.
먼저 클래스형 컴포넌트는 class를 사용하여 컴포넌트를 정의하는데, 이 방식은 React의 생명주기를 다룰 때 유용합니다.
클래스형 컴포넌트는 상태를 this.state로 정의하고 생명주기 메서드를 오버라이딩하여 다양한 작업을 수행합니다.
함수형 컴포넌트는 function으로 컴포넌트를 정의합니다.  현재는 useState 훅을 사용하여 상태를 관리할 수 있고 useEffect  훅을 사용하여 생명주기 메서드와 유사한 작업을 수행할 수 있습니다.

함수형 컴포넌트를 사용하면 클래스형에 비해 더 간결하고 가독성이 좋은 코드를 작성할 수 있습니다.
또한 현재는 다양한 리엑트 훅이 나와있고 공식문서에서도 함수형 컴포넌트와 훅을 함께 사용할 것을 권장합니다.