리액트를 처음 배우기 시작할 때 제일 처음 알게 된 사실은
'과거에는 클래스형 컴포넌트를 사용했지만 요즘 대세는 함수형 컴포넌트이다.' 라는 것이다.
때문에 프로젝트도 다 함수형으로 만들었는데, 정작 이러한 동향에 대해서 정확히 파악하지 못하고 있었다. 그런 와중 토론글에 남겨주신 한 분의 답변을 보고 머리에 전구가 켜지 듯 궁금증이 해소되어 공유해본다!
함수형 컴포넌트가 왜 대세가 됐는지 이해하고 싶다면 Hook의 도입이 어떻게 클래스 컴포넌트가 갖고있던 기존의 문제들을 해결했는지 이해하면 더 도움이 될 것이다.
대표적인 예로는 클래스 컴포넌트들은 대부분 UI를 렌더링 하는 로직 (e.g. eventListener 처리 로직) 과 내부 데이터 (e.g 상태/ 생애주기)를 처리하는 로직을 따로 떼어내기가 어렵기 때문에 코드가 많이 복잡하고 가독성이 떨어진다. 그래서 버그도 빈번히 발생하고 유지보수성도 함수형 컴포넌트에 비해 상대적으로 떨어진다.
이런 문제가 있음에도 그동안 클래스 컴포넌트를 사용한 이유는 기존 함수형 컴포넌트의 기능이 많이 제한적이기 때문이었다. 단순한 UI 를 보여주는 것 외에 상태관리, 컴포넌트 생애주기 관리, 하위 컴포넌트에 Props 전달같은 일들은 모두 클래스 컴포넌트에서만 가능했다.
하지만 Hook이 도입 되면서부터, useState와 useEffect 를 이용해 함수형 컴포넌트 내부에서도 상태 및 컴포넌트 생애 주기도 관리할 수 있게 됐고, 이제 함수형 컴포넌트로도 클래스 컴포넌트가 할 수 있는 작업들을 더 쉽고 간결하게 할 수 있게 됐던 점이 크다.
또한 Hook 을 통해 컴포넌트 내부 데이터 처리 로직을 컴포넌트에서부터 따로 분리 시킬 수 있게 되면서 코드 재사용성이 많이 높아진것 뿐만 아니라 개발자들이 UI 렌더링 로직과 데이터 처리 로직도 따로 분리해서 생각할수 있게 된 점도 중요한 것 같다. (예를 들면 SearchBar 컴포넌트를 만들때 Input 박스를 보여주는 로직과, SearchBar 에 들어가는 Debouncing 이나 Data Fetching 같은 로직들은 custom hook 으로 빼내어서 관리하는 부분). 덕분에 디자인을 수정해야 할 경우에도 UI 로직만 손보면 되다보니 클래스 컴포넌트를 사용할때 보다 훨씬 편하게 개발할 수 있기도 하다.
Hook을 통해 상태 로직을 재사용하기 쉬워지다 보니 이를 기반으로 여러 라이브러리들이 (e.g. react-query) 개발되면서 리액트 생태계 자체가 함수형 컴포넌트를 사용하는 방향으로 흘러가는 것이 아닐까 추측해본다. 리액트 공식 웹사이트에서는 클래스 컴포넌트를 제거할 계획은 없다고는 하지만 최근 업데이트들이 Hook 관련된 것인 점만 고려해도 리액트 팀이 의도적으로 Hook과 함수형 컴포넌트를 사용하게 하는 방향으로 유도하고 있다고도 볼 수 있지 않을까?
더 자세한 내용은 공식문서를 참고해보자. - https://ko.reactjs.org/docs/hooks-intro.html#motivation
