📌 React Hooks
React 버전 16.8에 등장한 Hook은 함수 컴포넌트에서 사용하는 메소드이다.
-
이전의 클래스 컴포넌트에서는 컴포넌트 사이의 state 로직을 재사용하기 어려웠다.
-
자바스크립트의 this 키워드가 어떻게 동작하는지 알아야 로직을 이해할 수 있고, 컴포넌트가 복잡해질수록 이해하기 어려웠다.
"이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook은 React의 정신을 희생하지 않고 함수의 사용을 권장합니다. Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다."
Hook은 클래스를 작성하지 않고도 state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수다.
"Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다." -공식문서
💡 Hook 사용 규칙 2가지
1. 최상위에서만 호출해야 한다.
반복문, 조건문 혹은 중첩된 함수 안에서 Hook을 호출하지 않아야 한다.
따라서 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 이러한 점을 통해 Hook의 상태를 올바르게 유지할 수 있다.
2. 오직 React 함수 내에서 Hook을 호출해야 한다.
일반적인 자바스크립트 함수에서 호출하지 않는다.
✏️ useMemo
특정 값(value)을 재사용하고자 할 때 사용하는 Hook
메모이제이션(Memoization)된 값(value)을 반환한다.
import { useMemo } from "react";
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
//생성 함수, 의존성 배열의존성 배열이 변경되었을 때, 생성 함수를 호출해서 값을 다시 계산한다.
변경되지 않으면, 이전에 연산한(메모이제이션 된) 값을 재사용한다.
useMemo Hook을 호출하면 복잡한 연산의 중복을 피하고 컴포넌트를 최적화한다. ➞ React 앱의 성능을 최적화한다.
✏️ useCallback
특정 함수를 재사용하고자 할 때 사용하는 Hook
메모이제이션(Memoization)된 콜백 함수를 반환한다.
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
//useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다.콜백 함수를 메모리에 저장했다가 반환한다.
의존성 배열이 변경되었을 때에만 콜백 함수가 변경된다.
(useCallback을 사용하지 않은,) 새로이 만들어 호출하는 함수는 메모리 주소 값이 다르기 때문에 기존의 함수와 같은 함수가 아니다.
useCallback을 이용해 함수 자체를 저장해서 다시 사용하는 것은 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다.
=> 참조 동등성에 의존한다.
따라서 useCallback은 자식 컴포넌트의 props로 함수를 전달해줄 때 예상치 못한 성능 문제를 막을 수 있어서 유리하다.
Learn more...
Memoization: 기존에 수행한 연산의 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
중복 연산을 할 필요가 없어 앱의 성능을 최적화할 수 있다.
렌더링 최적화 Hook은 메모이제이션 로직을 직접 구현하지 않아도 대신 해준다.
https://ko.reactjs.org/docs/hooks-reference.html#usememo
https://ko.reactjs.org/docs/hooks-reference.html#usecallback
