[💻 코드스테이츠 FE 44기] React 심화 - React Hooks

✔️ 시작

이전 학습에 이어 useMemo, useCallback에 대해 학습했다.

✏️ 배운 것

Hook?

• 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메서드
• function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형(구 버전) 컴포넌트에서는 동작하지 않는다.

Hook 사용 규칙

• 리액트 함수의 최상위에서만 호출해야 한다.
  - 반복문, 조건문, 중첩된 함수 내에 작성할 경우 에러가 발생할 수 있다.
• 리액트 함수 내에서만 사용되어야 한다.
  - 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다.

렌더링 최적화하는 Hook

컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다.

너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.

useMamo

• 특정 값(value)을 재사용할 때 사용한다. (반복되는)
• 함수의 반환 값을 캐시하는데 사용한다.
  - 해당 함수가 호출 될 때 마다 계산되는 대신, 의존성 배열 내의 값들이 변경 될 때만 사용한다.
• 메모제이션(MemoiZation)된 값을 반환한다.

//기본 문법
const 변수명 = useMemo(함수, 의존성 배열)

//useMemo를 사용하려면 import해야한다.
import { useMemo } from "react";

function Calculator({value}){
	//기존 result를 useMemo로 감싸주면 된다.
    //const result = calculate(value);
	const result = useMemo(() => calculate(value), [value]);

	return (
    	<div>
			{result}
     	</div>
    )
}

• value값이 계속 변경되는데 아닌 경우 해당 값을 어딘가에 저장(메모이제이션)해 두었다가 다시 꺼내 쓸 수는 방법으로 useMemo로 감싸주면 이전 구축된 렌더링과 새로 구축된 렌더링을 비교해 value값이 동일한 경우 이전 렌더링의 value값을 재활용할 수 있다.

Memoization?

기존에 수행한 연산의 결과 값을 메모리에 저장해 두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

useMemo는 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화 시킨다.

useCallback

• useCallback 또한 useMemo처럼 메모제이션 기법을 사용한다.
• useCallback을 사용하면 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.
• 메모리 어딘가에 함수를 꺼내 호출한다.
  - 자식 컴포넌트의 props로 함수를 전달해 줄 때 사용하기 좋다.

//기본 문법
const 변수명 = useCallback(함수, 의존성 배열)

//useCallback을 사용하려면 import해야한다.
import { useCallback } from "react";

function Calculator({x, y}){
  	//기존 add를 useCallback으로 감싸주면 된다.
	//const add = () => x + y;
	const add = useCallback(() => x + y, [x, y]);

	return (
      <div>
		{add()}
      </div>
    )
}

• x와 y값이 동일하다면 다음 렌더링 할 때 해당 함수를 다시 사용한다.

useMemo

• 함수의 반환 값을 캐시한다.
• 계산량이 많은 함수의 결과를 캐시하고 재사용하는데 유용하다.

useCallback

• 함수 자체를 캐시한다.
• 자주 새로운 함수가 생성되는 이벤트 핸들러나 콜백 함수를 최적화하는데 유용하다.

📍 마치며

useMemo, useCallback 두 가지 Hook은 렌더링을 최적화하는데 사용한다.
둘 다 비슷할 수 있지만 어느 것을 재사용하는지가 다르다는 점을 참고해
이후 프로젝트나 현업에서 사용하면 될 것 같다.