React 는 왜 함수형 컴포넌트 사용을 권장할까?

 

React 코드를 작성하던 저는 동료에게 이런 질문을 받았습니다.

 

**님 React 클래스형 컴포넌트 써보셨나요?

왜 함수형 컴포넌트만 쓰는건지 정확한 이유를 잘 모르겠어요

 

일단 함수형 컴포넌트 작성법이 훨씬 쉽고 React 공식문서에서 권장하는 방법이니까요?

이렇게 대답한 저는 더 정확한 정보를 알려주지 못한 미안함과

 

React를 사용하고 있으면서도 자세하게 모르고 있었던 저 자신에게 부끄러움을 느꼈습니다.

 

그리고 해당 질문으로 React 문서를 찾아보게 되었습니다.

 

“언제부터 이렇게 자연스럽게 함수형 컴포넌트로만 React를 사용하게 되었지?”

 

머릿속의 수많은 물음표들

 

기존에 Vue 2 를 사용하여 웹 개발을 하고 있었고

회사가 사용하는 프레임워크가 변경됨으로 인해 React로 넘어왔기 때문에

 

공식문서를 빠르게 찾아보고

왜 그렇게 사용해야하는가에 대해서는 크게 생각하지 못한채

빠르게 React 에 적응하고 코드를 작성해야 했습니다.

 

React 공식 문서에는 함수형 컴포넌트와 클래스형 컴포넌트를 설명하는 부분이 있습니다.

 

저는 문서의 그 부분을 더 자세히 읽어보지 않고

React 공식 문서에서 함수형 컴포넌트 사용을 권장하고 있으니까 그거써야지 라는 생각으로 작성을 하다

현재 상황까지 오게 되었습니다.

 

---

 

React Hook의 탄생이 함수형 컴포넌트를 권장하게 만든 가장 큰 이유이다.

 

Hook의 개요 – React

 

왜 React 공식 문서에서는 함수형 컴포넌트 사용을 권장할까요?

정확한 React의 답변은 링크된 페이지에 모두 적혀있습니다.

일단 이유를 찾기 전에 각각 어떤식으로 작동하는지 살펴보았습니다.

 

클래스형 컴포넌트는 라이프사이클( 생명주기 ), State 기능을 사용할 수 있습니다.

함수형 컴포넌트는 React Hook을 사용할 수 있습니다.

 

React Hook 탄생 이전, 함수형 컴포넌트에서는 State, 라이프사이클을 사용하지 못했습니다.

만약 제가 그때 React 를 사용하고 있었다면 클래스형 컴포넌트를 사용했을것 같습니다.

 

그렇게 생각한 이유는 바로 함수형 컴포넌트는 간편했지만,

클래스형 컴포넌트에 있는 라이프사이클, state 기능이 없었기 때문입니다.

 

하지만

 

React Hook 기능이 추가되면서 클래스형 컴포넌트의 단점들이 채워지게 되었습니다.

 

클래스형 컴포넌트의 단점

1. 컴포넌트 선언 방식이 함수형 컴포넌트보다 복잡하다.
2. 라이프사이클에 올바르지 못한 로직이 들어가서 버그가 쉽게 발생한다.
3. JavaScript this 개념 때문에 혼란을 준다.
4. 코드의 최소화가 힘들다.

---

 

React Hook 덕분에 클래스형 컴포넌트로 코드를 작성하지 않아도

React의 여러 기능을 사용할 수 있게 된겁니다!!! 👏🏻👏🏻👏🏻

 

결과적으로 이렇게 React 사용자들은

비교적 간편하고, this 로 인해 혼란스럽지 않으며, 코드의 최소화가 쉬운

함수형 컴포넌트를 주로 사용하게 된것입니다.

 

저는 이 내용을 정리해서 해당 부분을 궁금해 했던 동료에게 바로 알려주었습니다.

직장 동료의 궁금증 덕분에 저의 부족했던 지식을 더 채워넣게 되었습니다.

 

덕분에 왜 함수형 컴포넌트를 사용하는가 뿐만 아니라

앞으로 어떤것을 사용하고 어떤 코드를 작성하든 항상 "왜?" 라는 질문을 달고 개발하면

더 구체적으로 명확하게 알게 되겠구나 라고 깨닫게 되었습니다.

 

 

 

---

 

출처: https://ko.reactjs.org/docs/hooks-intro.html