출처 : 소플의 처음 만난 리액트(도서)
훅이란 무엇인가?
Hook 이라는 영단어는 갈고리라는 뜻을 갖고 있는데, 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미한다.
리액트의 state 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만드는 것.
이러한 훅의 이름은 모든 use로 시작한다. 훅이 수행하는 기능에 따라서 이름을 짓게 되었는데 각 기능을 사용하겠다는 의미로 use를 앞에 붙였다고 한다.
useState
state를 사용하기 위한 훅이다. 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() 훅을 사용해야 한다.
const [변수명, set함수명] = useState(초깃값);eg)
import React, { useState } from "react";
function Counter(props) {
const [ count, setCount] = useState(0);
return(
<div>
<p> 총 {count} 번 클릭하였습니다. </p>
<button onClick={() => setCount(count+1)}>
클릭
</ button>
</div>
);
}useState()를 사용하여 카운트 값을 state로 관리하도록 만든 것.
버튼이 눌렀을 때 setCount()함수를 호출해서 카운트를 1 증가시킨다.
그리고 count의 값이 변경되면 컴포넌트가 재렌더링되면서 화면에 새로운 카운트 값이 표시된다.
useState()를 사용하는 방법에서는 변수 각각에 대해 set함수가 따로 존재한다는 것을 기억하자.
useEffect
useEffect(이펙트 함수, 의존성배열);.useEffect() 는 리액트의 함수 컴포넌트에서 사이드 이펙트를 실행할 수 있도록 해 주는 훅이다. 여기서 리액트의 사이드 이펙트의 의미는 그냥 효과 혹은 영향 정도라고 기억하자.
uesEffect() 훅만으로 생명주기 함수와 동일한 기능을 수행할 수 있다.
import React, { useState, useEffect} from 'react';
function Counter (props) {
const [count, setCount] = useState(0);
// componentDidMount, componentDidUpdate와 비슷하게 작동합니다.
useEffect( () => {
// 브라우저 API를 사용해서 document의 title을 업데이트 합니다.
document.title = `총 ${count}번 클릭했습니다.`;
});
return (
<div>
<p> 총 {count} 번 클릭하였습니다. </p>
<button onClick={() => setCount(count+1)}>
클릭
</ button>
</div>
);
}
export default Counter;
useEffect( () => {
// 컴포넌트가 마운트 된 이후,
// 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
// 의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행됨
// 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
...
return () => {
// 컴포넌트가 마운트 해제되기 전에 실행됨
}
}, [의존성변수1, 의존성 변수2, ...]);useMemo
const memoizedValue = useMemo(
() => {
// 연산량이 높은 작업을 수행하여 결과를 반환
return computeExpensiveValue(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);useMemo()로 전달된 함수는 렌더링이 일어나는 동안 실행되어서 일반적으로 렌더링이 일어나는 동안 실행돼서는 안된다.
의존성 배열이 잘못 되어 있는 경우에 자동으로 경고 표시를 해 주면 고칠 방법을 제안해줌
useCallback
useMemo() 훅과 유사하지만, 값이 아닌 함수를 반환하다는 점이 다르다.
const memoizedCallback = useCallback(
() => {
doSomething(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);useRef
useRef() 훅은 레퍼런스를 사용하기 위한 훅이다. 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다. useRef() 훅은 바로 레퍼런스 객체를 반환한다.
const refContainer = useRef(초깃값);훅의 규칙
훅은 무조건 최상위 레벨에서만 호출해야 한다. 여기에서 말하는 최상위 레벨은 리액트 함수 컴포넌트의 최상위 레벨을 의미한다.
반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안 된다.
훅은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다.
리액트 함수 컴포넌트에서만 훅을 호출해야 한다. 혹은 리액트 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 훅에서만 호출할 수 있다.
