React Hooks

React의 Hooks

• 함수형 컴포넌트(Function component)는 클래스형 컴포넌트(Class component)와는 다르게 상태 값을 사용하거나 최적화할 수 있는 기능들이 미진
  → 이를 보완하기 위해 도입한 개념이 Hook.
• hook은 클래스형 컴포넌트에서는 작동하지 않음.
• 함수 컴포넌트 내에서 사용되도록 고안된 메소드 → 자바 스크림트 함수 내에서는 작동하지 않는다.
• 사용 규칙 :
  • 리액트 함수의 최상위에서만 호출해야 한다 : 반복문, 조건문, 중첩된 함수 내에서는 사용 불가
  • 리액트 함수 내에서만 사용되어야 한다.

 

useMemo

• 특정 값(value)을 재사용하고자 할 때 사용하는 Hook.
• 반드시 Import 로 불러와서 사용해야 한다.

import { useMemo } from "react";

• 값이 변경되지 않을 경우, 렌더링할 때마다 호출되지 않도록 저장했다가 필요할 때만 꺼내서 사용하고자 할 때, useMemo를 사용.
• 복잡한 연산의 불필요한 중복을 피하고, 앱의 성능을 최적화시킬 수 있다.

[코드 예시]

function Calculator({value}){

	const result = calculate(value);

	return <>
      <div>
					{result}
      </div>
  </>;
}

 

위의 코드를 useMemo를 사용하면 아래와 같이 작성이 가능하다.

 

import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return <>
      <div>
					{result}
      </div>
  </>;
}

 

useCallback

• 함수의 재사용을 위해 사용하는 Hook.
• 반드시 Import 로 불러와서 사용해야 한다.
• 함수가 의존하고 있는 값이 변경되지 않을 때, useCallback Hook를 사용하면 리렌더링될 때마다 함수를 새로 만들어서 호출하지 않고, 기존의 함수를 계속해서 반환한다.
• 자식 컴포넌트의 props로 함수를 전달해줄 때 사용하면 좋다.
• useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다.

[코드 예시]

function Calculator({x, y}){

	const add = () => x + y;

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

 

위의 코드를 useCallback을 사용하면 아래와 같이 작성할 수 있다.

 

import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

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