React 공식 문서 Hook (1) : Hook 소개

[Hook 이란?]

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

(React 16.8.0은 Hook을 지원하는 첫 번째 배포입니다. 업그레이드할 때 React DOM을 포함한 모든 패키지를 업데이트하는 것을 잊지 마세요. React Native는 v0.59부터 Hook을 지원합니다.)

 

[Hook을 쓰는 이유]

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

(문제)

기존 class 컴포넌트에서는 이 문제를 해결하기 위해 render props 그리고 고차 컴포넌트와 같은 패턴을 사용했다. 그러나 이런 패턴은 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵다(wrapper hell)

(Hook)

Hook를 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 이것은 독립적인 테스트와 재사용이 가능하다.(Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다)

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

(문제)

각 생명주기 메서드는 자주 관련 없는 로직이 섞여 있습니다. 예를 들어, 컴포넌트들은 componentDidMount 그리고 componentDidUpdate로 데이터를 가져오는 것을 수행할 수도 있습니다. 그러나, 같은 componentDidMount 메서드라도 이벤트 리스너를 설정하는 것과 같은 관계없는 일부 로직이 포함될 수도 있으며, componentWillUnmount에서 cleanup을 수행하기도 합니다. 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.

(Hook)

생명주기 메서드를 기반으로 쪼개는 데 초점을 맞추기보다는, Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있습니다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 조금 더 예측할 수 있도록 하기 위해 리듀스를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있습니다.

 

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

(문제)

Class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이라는 것을 알게 되었습니다.(Javascript에서 어떻게 this가 작동하는지 알아야만 했고, 대부분의 다른 언어와는 다르게 작동합니다. 이벤트 핸들러가 등록되는 방법을 기억해야 함) 문법적으로 제안이 없다면 코드는 매우 장황해집니다. React 안에서의 함수와 Class 컴포넌트들을 구별하고 각 요소를 언제 사용하는지는 숙련된 React 개발자 사이에서도 의견이 일치하지 않습니다.

(Hook)

Hook은 Class 없이 React 기능들을 사용하는 방법을 알려줍니다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook은 React의 정신을 희생하지 않고 함수를 받아들입니다. Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다.

 

리액트 공식문서 참고 : https://ko.reactjs.org/docs/hooks-intro.html#motivation