Hook 종류

useState

useRef

useEffect

useMemo

useCallback

useReducer

useState

가장 기본적인 hook

...
// name => 앞으로 사용할 상태(변수같은 개념)
// setName => name을 변경할때 사용하는 함수

const [name, setName] = useState('');
...

useState('') → 이렇게 작성하면 name의 값이 ''으로 초기화 된다.

useRef

// 추후 추가예정

useEffect

...
const [name, setName] = useState('');

useEffect(등록한 함수,[변경을 감지할 값]);
...

1. useEffect는 [ ]안에 있는 값들이 변경될때, 컴포넌트가 마운트 될 때 마다 '등록한 함수'를 실행한다
2. 만약 [ ]안에 아무것도 없다면 컴포넌트가 마운트 될때만 실행된다
3. 만약 '등록한 함수'에서 함수(이를 뒷정리 함수라고 한다)를 반환하고 [ ]에 값이 존재하면 컴포넌트가 언마운트 될때와 업데이트 직전에 반환한 함수를 실행한다
4. 뒷정리 함수가 있고 [ ]에 아무것도 없다면 컴포넌트가 언마운트 될때만 '등록한 함수'를 실행한다

useMemo

함수 컴포넌트 내부에서 발생하는 연산을 최적화 할때 사용
값이 바뀌지 않았다면 이전 값을 그대로 사용한다

...
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');

const newName = useMemo(복잡한 연산의 함수1,[name]);
const newNickname = useMemo(복잡한 연산의 함수2,[nickname]);
....

<p> {newName}</p>
<p> {newNickname}</p>

이런식으로 작성하면
name이 변경되면 '복잡한 연산의 함수1'을 실행하고 nickname이 변경되면 '복잡한 연산의 함수2'가 실행된다.

useCallback

주로 렌더링 성능을 최적화 할때 사용

const onInsert = useCallback(함수,[값1, 값2]);

값1과 값2가 바뀌었을때만 함수를 생성한다.

Q. 왜 '실행'이 아니라 '생성' 인가?

보통의 경우 컴포넌트 안에 선언된 변수, 함수는 컴포넌트가 다시 렌더링 될때마다 새로 선언되고 생성된다 → 컴포넌트 내부의 어떠한 변수(아무거나)가 바뀌어도 함수가 다시 생성된다

따라서 우리는 상관있는 변수와 함수만 엮어서 해당 변수가 바뀌었을 때만 함수를 다시 생성하기 위해 useCallback을 사용하는 것이다.

useReducer

// 추후 추가예정

리액트 Hook 관련 참고 링크
useMemo, useCallback 사용이유 참고한 링크