Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
1. Hook 이란?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(Lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수다.
Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다.
React는 useState 같은 내장 Hook을 몇 가지 제공한다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능하다.
2. 함수형 컴포넌트?
function으로 정의하고 return문에 JSX 코드로 반환한다.
function을 사용하지 않고 화살표 함수 => 로 선언해도 된다.
3. 클래스형 컴포넌트?
class로 정의하고 render() 함수 안에서 JSX 코드로 반환한다.
class형 컴포넌트에서는 state(상태)를 사용할 수 있으며, 라이프사이클 및 메소드를 이용해 컴포넌트가 마운트 및 언마운트 될 때 추가 작업을 수행시키는 등 조작할 수 있다.
Hook이 나온 뒤 함수형 컴포넌트에서도 이것이 가능해졌다.
4. Hook 왜 쓰는가?
Hook을 이용하여 기존 class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React 기능을 사용할 수 있다.
Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 이를 이용해 독립적인 테스트와 재사용이 가능하다.
Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어준다.
상태 관련 로직은 한 공간안에 묶여 있기 때문에 이런 컴포넌트들을 작게 분리하는 것은 불가능하며 테스트하기도 어렵다.
이 때문에 많은 사용자들은 React를 별도의 상태 관리 라이브러리와 함께 결합해서 사용해왔다.
그러나, 이런 상태 관리 라이브러리는 종종 너무 많은 추상화를 하고, 서로 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱더 어렵게 만들었다.
이같은 문제를 해결하기위해, 생명주기 메소드를 기반으로 쪼개는 것 보다는 Hokk을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.(구독 설명 및 데이터를 불러오는 것과 같은 로직)
또한 이러한 로직의 추적을 쉽게 할 수 있도록 reducer를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.
5. hook 종류
5-1) useState
import React, { useState } from 'react';
function Example() {
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useState는 인자로 초기 state 값을 하나 받는다. 카운터는 0부터 시작하기 때문에 위 예시에서는 초기값을 0으로 넣어준 것이다.
this.state와는 달리 useState Hook의 state는 객체일 필요가 없다. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용된다.
여러 state변수 선언하기
하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있다.
function ExampleWithManyStates() {
// 상태 변수를 여러 개 선언했습니다!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}배열 구조 분해(destructuring)문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다.
이 변수명은 useState API와 관련이 없다. 대신에 React는 매번 렌더링할 때 useState가 사용된 순서대로 실행할 것이다.
5-2) useEffect
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 side effects(또는 짧게 "effects") 라고 한다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다.
useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.
React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// componentDidMount, componentDidUpdate와 비슷합니다
useEffect(() => {
// 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}위 코드는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트다.
useEffect를 사용하면, React는 DOM을 바꾼 뒤에 "effect" 함수를 실행할 것이다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있다.
기본적으로 React는 매 렌더링 이후에 effects를 실행한다.(첫 번째 렌더링도 포함해서)
Effect를 "해제"할 필요가 있다면, 해제하는 함수를 반환해주면 된다. 이는 선택적이다.
6. Hook 사용 규칙
Hook은 그냥 javascript 함수이지만, 두 가지 규칙을 준수해야 한다.
-
최상위(at the top level) 에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 말 것.
-
React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반적인 javascript 함수에서는 Hook을 호출해서는 안된다.
7. Custom Hook 나만의 Hook 만들기
개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생긴다.
이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, high-order components와 render props다.
Cunstom Hook은 이 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해준다.
각 컴포넌트의 state는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 Hook호출은 완전히 독립된 state를 가진다. 심지어 한 컴포넌트 안에서 같은 custom hook을 두 번 쓸 수도 있다.
custom hook은 기능이라기보다는 컨벤션(convention)에 가깝다. 이름이 use로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom hook이라고 부를 수 있다.
(출처 : 공식 문서)
