React Hooks

정의

함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드

Hook은 class가 아닌 function으로만 react를 사용할 수 있게 해줌 

클래스형 컴포넌트에서는 동작하지 않음 

 

 

Hook사용규칙 

1. 리액트 함수의 최상위에서만 호출해야 함

반복문, 조건문, 중첩된 함수 내에서 hook을 실행하면 예상한 대로 동작하지 않을 우려가 있음 

...
if(counter) {
    const [sample, setSample] = useState(0);
}
...

위의 코드처럼 조건문(if)안에 hook을 가져오면 react는 에러를 호출함 

 

2. 오직 리액트 함수 내에서만 사용되어야 함 

리액트 함수형 컴포넌트나 커스텀hook이 아닌 다른 일반 javascript 함수 안에서 호출은 안됨 

...
window.onload = function () {
    useEffect(() => {
        // do something...
    }, [counter]);
}
...

 

 

useMemo

정의: 특정 값(value)를 재사용하고자 할 때 사용하는 hook 

/* 예시 코드. useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import { useMemo } from "react";

function Calculator({value}){

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

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

장점: 복잡한 연산의 중복을 피하고, 리액트 앱의 성능을 최적화함 

 

useCallback

함수의 재사용을 위해 사용하는 Hook

/* 예시코드, useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import React, { useCallback } from "react";

function Calculator({x, y}){

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

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