리액트 Hooks: 1. hooks 란?
리액트 16.8 버전에서 Hooks 라는 새로운 기능이 추가 되었다.
해당 기능은 간단히 설명하자면 기존 리액트 component 에서 state 와 라이프 사이클을 사용하려면 class 로 component 를 생성해야 했다.
이말은 즉, 함수형 component 에서는 props 를 받아 사용할 수 있지만, state와 라이프 사이클을 사용할 수 없었다.
https://reactjs.org/docs/hooks-intro.html
Hooks 특징
- 현재 진행중인 프로젝트가 있다면 코드를 다시 짜지 않아도, 바로 사용할 수 있다.
- 어떠한 변화 없이 기능이 추가 되었기 때문에 이전 버전과의 호환성이 100%이다.
- 16.8.0 이후 버전에서 사용가능하다.
Hooks로 class를 대신할 수 있게됐지만, 리액트는 class를 제거할 계획이 없다고 밝혔다. 리액트에 대한 여러가지 컨셉(props, state, context, refs, and lifecycle)을 대체할 수 없는 대신, 더욱 직관적으로 제공한다고 한다.
Hooks가 나오게된 배경
Component 사이에서 stateful 한 로직의 재사용이 어렵다.
- 리액트는 컴포넌트에 재활용하는 방법인 “attach” 방법을 제공하지 않는다.
- 이런 문제들을 해결하기 위해 다양한 패턴이 사용되었다. (render propr, HOC …) 이런 패턴을 사용했을 때, 재구조화를 해야하고 이는 번거롭고 어려워질 수 있다. 또한 이런 패턴을
DevTools에서 확인해 보면 wrapper 지옥에 빠져있는 수많은 컴포넌트를 볼 수 있다. - Hooks 는 컴포넌트로 부터 stateful 한 로직을 추출해 낼 수 있으며 이것은 의존성과 재사용성을 테스트할 수 있다.
이해하기 어려운 복잡한 컴포넌트
- 처음은 가벼운 컴포넌트였지만, 개발을 진행하다보면 수많은 side effects와 stateful 로직이 걷잡을 수 없이 많아진다.
- 각각의 라이프 사이클은 자주 연관성이 없는 로직을 섞어 사용하곤 한다. 예를 들어 컴포넌트는
componentDidMount와componentDidUpdate라이프사이클에서 데이터를 fetch 할 수 있다. 하지만 몇몇componentDidMount메소드는 이벤트를 설정하는 데 연관 없는 로직 들을 포함할 수 있으며componentWillUnmount는 cleanup을 수행할 수도 있다. 함께 변경되는 관련 코드는 분리되지만 연관 없는 코드들은 단일 메소드로 결합한다. 이것은 버그와 무결성을 쉽게 발생시킨다. - 많은 경우 컴포넌트들을 작게 만드는 것은 불가능하다. stateful 로직은 모든곳에 있기 때문이다. 또한 이것은 테스트하는 것도 어렵다. 이것이 사람들이 state 를 관리하는 라이브러리를 함께 사용하는것을 선호하는 이유중 하나이다. 그러나 너무 추상적이라고 소개하고 다른 파일 사이를 건너뛰는것을 요구하며 컴포넌트 재사용을 더욱 어렵게 만든다.
- 이러한 이슈들을 해결하기 위해 Hooks는 라이프사이클 메소드를 기초로한 분리에 초점을 맞추는 것보다는 컴포넌트들을 연관성을 기초로 더 작은 함수로 분리할 수 있게 한다.
사람과 기계를 혼란시키는 Classes
- 코드를 재사용성과 구조적으로 만드는 것은 어려울뿐만 아니라 리액트를 배울때 classes는 큰 진입장벽이다. 다른 대부분의 언어들과는 다른 Javascript가 어떻게 동작하는지 이해하고 있어야한다. 이벤트 핸들러는 항상 바인딩이 되어야 하는것을 기억해야 한다. 안정적인 문법의 제안이 없다면, 코드는 매우 장황해진다.
- 사람들은 props, state, 단방향 데이터 흐름에 대해 이해하고 있지만 여전히 classes는 어려워한다.
- 이러한 문제를 해결하기 위해서 Hooks는 classes 없이 리액트의 특징들을 사용할 수 있게 해준다.