[React.js] 왜 Hook이 추가되었는가?

* 이 내용은 React의 공식 문서를 보고 정리한 내용입니다. 자세한 내용은 여기를 확인하세요.

 

React 16.8 버전에서 새롭게 추가된 Hook을 보았다.

함수형 컴포넌트에서도 state, 생명주기와 같은 기능을 사용할 수 있다는 내용인데..

이미 Class형 컴포넌트에서 가능한 일을 왜 함수형 컴포넌트에서도 가능하게 만들었을까?하는 궁금증이 생겼다.

그래서 공식 문서를 보고 간단히 내용을 정리해보았다.

왜 Hook이 추가되었는가?

 

| 기존 React에서는 컴포넌트 사이에서 상태와 관련된 로직 재사용이 어렵다.

그래서 우리는 context(provides, consumers), render props, HOC와 같은 패턴을 사용해왔다.

그러나 이러한 패턴들을 사용하면서 wrapper hell을 겪을 가능성이 높고, 이는 컴포넌트의 재활용을 어렵게 한다.

(context를 만들고, 이걸 사용하기 위해 다시 HOC로 감싸고... 했던 것들)

 

Hook은 컴포넌트에서 "상태 관련 로직"을 추상화할 수 있게 해준다! 계층의 변화 없이 상태 관련 로직을 뽑아낼 수 있는 것이다. => 즉, wrapper hell에서 벗어날 수 있도록 해준다.

 

| 복잡한 컴포넌트들을 이해하기가 어렵다.

사이트 이펙트, 복잡한 상태 관련 로직들, 생명주기 메서드에 섞여 있는 로직 등..

특히, 관련 있는 코드들(eg. 이벤트 등록 및 해제)이 각각의 생명 주기 메서드에 분리되어 있다는 문제점이 있다.

또한 관련 없는 코드들이 한 생명 주기 메서드에 묶여있기도 한다.(API 호출, 이벤트 등록, DOM 접근 등..)

 

이렇게 상태 관련 로직이 한 공간에 있기 때문에 이런 컴포넌트를 잘게 쪼개는 것이 불가능하고, 결국 React를 사용할 때 별도의 상태 관리 라이브러리를 함께 사용하게 한다.

 

Hook은 이런 문제점을 해결하기 위해 Class형과는 다르게, 생명주기 메서드를 기반으로 쪼개지 않고 로직에 기반을 둔 작은 함수 컴포넌트로 나눌 수 있다.

 

| Class 개념은 배우기 어렵다.

Class는 코드의 재사용성과 구성을 어렵게 할 뿐 아니라, React를 배우는 것을 어렵게 만든다. Class 개념 자체가 어렵고, JS의 개념적인 부분에 대해서도 깊게 알고 있어야 했다.

 

Hook은 Class 없이 React 기능들을 사용할 수 있게 해준다. 또한 React 컴포넌트는 항상 함수에 더 가까운데, Hook을 사용하면 이런 React의 철학을 깨지 않고 개발이 가능하다.

 

 

그러나!

Hook이 새로이 추가되었다고 해서, 기존의 Class로 짜여진 코드들을 전부 리팩토링 할 필요는 없다.

기존에 구현된 코드는 그대로 사용하고, 새로운 코드들 중에 필요한 부분을 Hook으로 추가하며 점진적으로 적용하면 된다.