🌎 React Hooks
🌞 1. Hook란 무엇인가?
리액트 훅(React Hooks)이란 리액트 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.
기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기 때문에 상태 로직의 재사용이 불가능하였으며 테스트 또한 어려웠지만 훅을 도입함으로써 상태 관련 로직을 추상화할 수 있게 되어 재사용과 테스트가 가능하게 되었다. 즉, 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었습다.
이렇듯 뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 훅의 사용률은 높아지고 있으며 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장하고 있다.
요약하자면 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
🌞 2. Hook 이 필요하게 된 이유와 장점
hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있어 필요하다.
-
함수형 컴포넌트들은 기본적으로 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행됨
- 클래스형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render() 를 제외한 나머지 method 및 state는 그대로 보존이 되어 있음.
-
이는 함수형 컴포넌트들이 기존에 가지고 있던 상태(state)를 전혀 관리(기억)할 수 없게 만듦
- 그래서 함수형 컴포넌트를 Stateless Component 라고 했던 것.
- 단순하게 React에서의 state 만을 의미하는 것이 아닌, 함수내에 써져 있는 모든 코드 및 변수를 기억할 수 없다는 의미
⇒ 함수형 컴포넌트가 리렌더링될때 무조건 새롭게 선언 & 초기화 & 메모리에 할당이 됨
-
하지만 Hook의 등장으로, 브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태(state)를 가질 수 있게 한 것.
⇒ 쉽게 말해서 함수 내에 써져 있는 코드 및 변수를 기억할 수 있게 됐다 라는 의미
- 공식홈페이지에 따르면 Hook을 만든 이유는 다음과 같다.
1) 컴포넌트 사이에서 상태 로직 재사용의 어려움
2) 복잡한 (클래스형) 컴포넌트들은 이해하기 어려움
3) 클래스자체 개념을 이해하기 어려움
🌧 Hook을 사용하면 어떤점이 좋은가?
기본적으로 클래스형 컴포넌트보다 쉽고 직관적으로 같은 기능을 만들 수 있다.
1.함수형 컴포넌트로 코드 통일 가능
- 이전에는 state유무로 있으면 클래스형 / 없으면 함수형으로 분리해서 작업했다고 함
2.useEffect로 클래스형 Lifecycle에 흩어져 있는 로직 묶음
- hook은 Lifecycle과 달리 여러번 선언가능 해 코드가 무엇을 하는지에 따라 hook별로 분기가 가능하다.
3.Custom Hook을 이용해 손쉽게 로직 재사용 가능함
- 클래스형 컴포넌트에서 로직을 재사용하기 위해 썼던 HOC나 render-props 같은 패턴이 가져오는 컴포넌트 트리의 불필요한 중첩을 없애줌
🌞 3. Hook의 사용 규칙
Hook을 사용할때는 규칙이 있다. 이를 꼭 지켜야 정상적으로 hook이 실행되고 코드가 꼬이지 않는다.eslint-plugin-react-hooks (ESLint 플러그인) 을 사용한다면 아래 두 규칙을 강제한다. (CRA에 포함되어 있다.)
- Hook은 위에서부터 아래로 순서에 맞게 동작한다.
- 최상위에서만 Hook을 호출
React 함수(컴포넌트)의 최상위에서만 Hook을 호출 할 것.
반복문, 조건문, 중첩된 함수등에서 호출 X- React 함수에서만 Hook을 호출
Custom Hook에서는 호출 가능
일반적인 Javascript 함수에서는 호출 X- Hook을 만들때 앞에 use 붙히기
그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문 (공홈)- React는 Hook 호출되는 순서에 의존
한 컴포넌트에서 여러개의 hook이 사용되는 경우
