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

소개

react 클래스형 컴포넌트와 함수 컴포넌트의 차이점을 알아봅시다.

 

 

현재

react 공식문서는 새로운 프로젝트의 경우 함수 컴포넌트 사용할 것을 권장하고 있습니다.

 

 

why

react 개발팀은 왜 클래스형 컴포넌트를 놔두고 함수 컴포넌트를 개발했을까요?

 

1. 로직을 재사용하기 힘들었다.

두 컴포넌트의 로직이 비슷할 때, 하나의 더 높은 차원의 컴포넌트를 생성하여 나머지 컴포넌트를 감싸주는 식으로 구현하였습니다. 이러다 보니 점점 감싸주는 컴포넌트의 개수가 많아졌고, wrapper hell에 빠지기도 하였습니다.

 

=> 현재는 커스텀 훅을 이용해서 로직을 재사용 합니다.

 

 

2. 복잡해진 컴포넌트는 이해하기가 어려웠다.

클래스형 컴포넌트의 경우 라이프 사이클을 이용하는 메서드가 있었습니다.

(componentDidMount, componentDidUpdate, componentDidWillUnmount)

한 컴포넌트에서 해당 메서드를 한번만 사용할 수 있었기 때문에, 코드가 비대해질 수 밖에 없었고 원치않는 사이드이펙트가 생기기도 하였습니다.

 

=>현재는 useEffect로 해결할 수 있습니다.

 

 

3.Class는 사람과 기계를 혼란스럽게 하였다.

대표적인 예시로 this가 있었습니다. React 클래스형 컴포넌트를 사용하려면 this에 대한 이해는 필수적이였습니다. 그러나 이 this는 다른 프로그래밍 언어와는 다르게 작동하기 때문에 많은 실수를 유발시키고, 개발자를 혼란시켰습니다.

또한 class는 코드의 최소화를 힘들게하고, 최적화를 방해하기도 하였습니다.

 

=>현재는 화살표 함수를 이용해 this를 신경쓰지 않아도 됩니다.

 

 

결론

react는 위에서 언급한 문제점들을 해결하기 위해, 함수컴포넌트와 hook을 도입하였습니다.

그로인해 라이프사이클 이벤트 사용불가, 상태 저장 불가 같은 단점들이 발생했지만, hook으로 이러한 문제점들을 해결할 수 있었습니다.