왜 클래스형 컴포넌트보다 함수형인가?

class 컴포넌트와 함수형 컴포넌트 둘다 써본 사람으로써 왜 함수형 컴포넌트를 더 좋아하는 지 정리해보고 싶었다. (진짜 그냥 해보고 싶었다)

클래스형과 함수형의 차이

• class component는 render()에서 jsx를 반환하고 functional component는 return으로만 반환한다

• 사용하는 코드의 양이 적다 (불필요한 render()가 선언되지 않고, this.props같은 방식을 사용하지 않음 - 주로 this가 빠지는게 크지 않나~)

• React 팀에서는 계속해서 함수형 컴포넌트를 밀어주고 있다. (hooks등 계속해서 새로운 기술들은 함수형에서만 밀어주고 있는 상황)

• 클래스형에서는 lifecycle로 컴포넌트 업데이트에 대해 관리하지만 함수형은 useEffect로만 관리해준다.

  • 함수형 컴포넌트는 props를 받아들이고 리액트를 반환하면 일반 JS함수인 반면 클래스형 컴포넌트는 리액트를 확장하는 JS클래스다.
  • 기존에는 state의 개념과 수명주기는 클래스형에서만 사용할 수 있었던 개념이지만 hook의 개념이 나온 이후로 부터 상황이 바뀌었음.

• babel로 트랜스파일링 될 경우 클래스형이 함수형보다 트랜스파일링되는 코드의 양이 많다. (증명은 완벽하게 되지 않은 상태, 그러나 엄청 큰 차이는 없는 것으로 보임.)

  • 참조문서: https://medium.com/@majidrahimi/functional-component-vs-class-component-57347b26a24b
  • babel 트랜스파일링 된 코드가 길어지면 안 좋은 점?
    • cra든 webpack으로 세팅을 하던 빌드과정에서 이전 브라우저 지원을 위해 babel을 이용하여 이전 버전의 스크립트 코드로 변형해주는 과정을 babel에서 해준다.
    • 그 과정에서 코드가 길어진다라는 것은 코드의 용량이 늘어나고, 또 js를 로드하는 용량이 많아 시간이 더 길어질 수 있기 때문에 좋지는 않은 것

• 사실상 class형과 함수형은 코드 스타일의 차이 함수형이 적는 코드의 양이 적고 보기가 쉽다.

함수형 컴포넌트의 장점?

• 함수형 컴포넌트는 단순히 props 객체와 properties 두가지 속성을 가진 단순한 객체다.
  • 성능적으로는 별 차이 없다라는 느낌으로 보임...
• 함수형은 일반 JS기능이라 코드를 읽고 테스트하기에 용이함
• 코드 작성량이 클래스형에 비해서 적다.
• 리액트에서 공식적으로 함수형 컴포넌트를 밀기 때문에 성능적이나 기능적으로 계속해서 발전하고, 할 가능성 있음.
• 테스트 코드 작성에 매우 유리하다.
• 클래스형과 함수형의 렌더링 시간에는 큰 차이가 없어 성능 차이는 거의 존재하지 않는다.

참고글

• https://medium.com/@fibonalabsdigital/react-class-components-vs-functional-components-which-is-better-776d0e2b4ed2