개요
리액트 훅은 16.8에 추가되었다. 리액트 개발은 훅 이전이 old 한 방식이라면 훅 이후는 완전히 다른 모던한 방식이라 앞으로 리액트를 개발할려면 반드시 사용해야 할 기술이다.
훅은 다음 몇가지 특징을 가진다.
- completely opt-in
훅을 적용하고 싶으면 적용할 수 있고, 원하지 않는다면 적용안할수도 있는 선택 옵션이다.
- 100% backwards-compatible
훅이 도입되면서 이전 버전이 지원되지 않는것은 아니다. 이전 문법과 100% 호환된다.
hook이 도입된 이유
- state 로직 재사용의 어려움
리액트에서 state를 재사용하기 위해서는 render props 혹은 HoC 같은 패턴을 사용해야 한다. 그러나 이 방식은 어렵고 코드를 읽기 어렵게 만든다. 또한 디버깅 툴로 살펴보면 클래스 컴포넌트가 중첩되는 wrapper hell 현상이 나타나게 된다.
hook은 컴포넌트 구조를 변경하지 않고 상태 로직을 재사용할 수 있게 해준다.
- 복잡한 컴포넌트는 이해하기 어렵다
처음에는 단순한 컴포넌트로 시작하더라도 상태 로직이 추가되면 관리할수 없을 정도로 커지고 수정할 때마다 많은 사이드 이펙트를 일이킬 수 있다.
상태 로직이 많아질수록 복잡해지는데 그렇다고 상태 로직마다 별도의 화일로 분리하는것도 여러가지 화일들 사이를 왔다갔다화므로 효율적이지 못하다.
- 클래스는 어렵다
클래스는 리액트를 배우는 장애물이 될 수 있다. 자바스크립트에서 this 는 다른 언어와 다르게 동작하므로 이해하기가 매우 어렵다.
hook은 클래스 컴포넌트를 사용하지 않고 펑션 컴포넌트만으로 개발할 수 있도록 해준다.
hook의 규칙
- function 컴포넌트에서만 사용할 수 있다.
클래스 컴포넌트에서 hook을 사용하면 안된다.
또한 단순한 자바스크립트 펑션에서 hook을 사용해서는 안된다.
- top level에서만 사용할수 있다.
루프내에서나 혹은 내부 함수나 조건문에서 사용해서는 안된다. 반드시 리액트 펑션 컴포넌트의 top 레벨에서 사용해야 한다.
컴포넌트 비교
| 함수 컴포넌트 | 클래스 컴포넌트 | |
| 인스턴스생성 | 없다. | new 로 인스턴스 생성 |
| 렌더링 | 함수를 호출해서 react element를 리턴받아서 갱신 | 인스턴스의 render 메서드를 호출 |
| 변수저장 | 펑션안에 변수는 기억되지 않는다. 함수가 호출될때마다 다시 초기화 | 인스턴스 멤버 변수에 저장 |
컴포넌트는 state가 변하거나 props가 변하면 렌더링이 일어난다.
렌더링이 일어나면 클래스 컴포넌트는 멤버 함수인 render 함수를 호출하면된다. 그러나 함수 컴포넌트는 함수를 call 해야 하고 call을 하게 되면 함수안에 여러가지 변수 할당과 함수 할당이 다시 일어나게 된다. 따라서 이런것들을 개선하기 위해서 useMemo, useCallback, useRef 같은걸 사용한다.
상태를 저장하는 useState, 라이프 사이클 메서드를 대체하는 useEffect, 변수를 저장할 수 있는 useRef는 필수적으로 사용해야 하는 훅이고, 그밖에 훅들은 성능 개선을 하기 위한 훅들이다.