[React] Hook이란 무엇이고 왜 나오게 되었나요?

Hook

: class 없이 state를 사용할 수 있는 기능

 

ko.reactjs.org/docs/hooks-intro.html#complex-components-become-hard-to-understand

Hook의 개요 – React

 

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

리액트는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않는다.

이전에는 render props나 고차 컴포넌트와 같은 패턴을 사용했는데,

이런 패턴을 사용한다면 컴포넌트를 재구성하고 코드 추적이 어려워진다고 한다.

provider, consumer, HOC, render props 등으로 둘러싸인 wrapper hell을 볼 가능성도 높아진다.

 

이는 Hook을 사용함으로써 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 그렇게 함으로써 독립적인 테스트와 재사용이 가능해지며, 계층 변화없이 상태 관련 로직을 재사용할 수 있도록 된다.

 

2. 복잡한 컴포넌트들은 이해하기 어렵다.

떄로는 유지하기 힘든 상태관련 로직들과 side effect가 있는 컴포넌트들을 유지해야한다.

각 생명주기 메서드는 보통 관련 없는 로직이 섞여있는 경우가 많은데,

이런 경우 상호 관련있는 코드는 분리하고, 연관 없는 코드들은 단일 메서드로 결합한다.

이로 인해 버그가 쉽게 발생할 수 있고, 무결성을 해치게 된다.

 

즉, 모든 공간에 상태관련 모든 로직이 들어있기 때문에, 컴포넌트들을 작게 만드는 것이 불가능하고, 테스트하기도 어렵다.

 

그래서 Hook을 사용하면 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있게 할 수 있다.

 

3. class는 사람과 기계를 혼동시킨다.

class는 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는 것에 큰 진입장벽이라고 한다.

Javacript에서는 this가 어떻게 작동하는지 알아야하는등.. 다른 언어와 다르게 동작하기 때문이다.

(즉, 사람들이 class 구조를 이해하는 것에 벽을 느낀다는 뜻인듯.)

 

또한 class는 잘 축소되지 않고, 핫 리로딩을 깨기 쉽고 신뢰할 수 없게 만든다

그래서 Hook은 class 없이 React 기능들을 사용하는 방법을 알려준다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝다.

(그렇다고 React에서 class제거한다는 뜻이 아니니 걱정말길..)

 

로이드가 그랬던 것처럼 공식문서가 참 불친절하다.

이해한듯 이해하기 어려운... 그런 문서라서 내가 써놓고도 잘 와닿지 않는다.