Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이며, class 없이 React를 사용할 수 있게 해주는 것입니다.
&npsb
React 공식문서
React Hooks ?
기존의 리액트는 컴포넌트를 생성할 때 클래스를 이용했다.
다만 클래스형 컴포넌트는 꽤나 높은 자바스크립트 이해도를 요구하여 진입 장벽이 높았으며
코드를 길어지기 때문에 코드의 간소화도 힘들었다.
이런 단점을 인지한 페이스북 리액트 팀에서는 이를 개선하고자 React.js v16.8에서 React Hooks를 도입했으며,
Hooks라는 변화는 함수형 컴포넌트에서도 클래스 컴포넌트와 같이 상태값을 관리할 수 있게되었고, 라이프 사이클 메소드를 사용할 수 있게되었다.
왜 Hooks를 써야하는가
1. 성능
간단하게도 함수형 컴포넌트가 클래스형 컴포넌트보다 더 빠르다.
또한 리액트 팀의 계획 상에서도 훅에 관련된 성능향상에 대한 업데이트를 꾸준히 하고있다.
2. 간결함
기존의 클래스형 컴포넌트를 사용할 땐 this, binding 등의 키워드를 자주 사용하였으며, 이는 자바스크립트에 대한 높은 이해도를 필요로 했다.
물론 코드의 재사용성을 해치고 코드 길이도 늘어나는 것은 덤이며, 코드를 읽는 사람들에게 혼동을 줄 수 있다.
함수형 컴포넌트를 사용하면 이런 일은 없어지고, 컴포넌트 생명주기에 있어서도 복잡하게 접근하지 않아도 된다.
3. 재사용성 향상
클래스형 컴포넌트에선 상태값과 관련된 로직을 재사용하기 어려웠다. 이를 해결하기 위해 고차 컴포넌트와 같은 방법을 사용했었지만,
이를 위해 여러 블록으로 감싸고 감싸다 보면 어느샌가 코드 추적이 힘들어질 수 밖에 없었다.
하지만 훅을 이용하면 이러한 문제에서 해방될 수 있다.
또한 함수형 컴포넌트를 사용하면 특정 컴포넌트 로직을 또다른 함수로 분리하여 커스텀 훅으로 재사용할 수 있다.
그럼 레거시 프로젝트는?
물론 기존의 프로젝트 및 라이브러리에서 사용되던 클래스형 컴포넌트를 함수형 컴포넌트와 훅으로 바꾸면 좋겠지만,
시간과 돈을 생각하면 쉽지 않은 일이다.
그래서 리액트 팀에서는 여전히 클래스 컴포넌트를 지원하며 리액트에서 제거하지 않을 계획이지만 훅을 사용하면서 다가오는 장점과 앞으로 리액트의 업데이트 계획을 생각하면 클래스형 컴포넌트를 계속해서 사용하는 것이 좋을 것 같지는 않다.
Hook을 사용할 때 규칙
- React 함수 내에서만 호출해야 한다
- 최상위 레벨에서만 호출해야 한다.
반복문과 조건문, 혹은 블록레벨 내의 함수에서 훅은 호출하면 안된다.
최상위에서 훅을 호출함으로써 컴포넌트가 렌더링될 때 마다 항상 동일한 순서로 훅이 호출되고,
상태를 정상적으로 유지할 수 있게된다.
