[React] Hook (useState, useEffect, useMemo, useCallback, useRef) 에 대해

1. Hook 이란?

Hook은 React 16.8버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다. Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 해준다.

1.1 Hook의 종류?

Hook의 종류로는 useState, useEffect, useMemo, useCallback, useRef등이 있다.

 

2. useState란? 

useState는 함수형 컴포넌트에서 state의 기능을 사용할 수 있게 해준다.

ex) 

const [count, setCount] = useState(0);

useState는 두개의 값을 반환한다. 

[현재 state, state를 변경하기 위한 함수]

 

3. useEffect란?

useEffect는 어떠한 값의 변화를 감지하면, 실행되어 특정 함수나 작업을 실행하는 Hook이다.

ex1)

useEffect(() => {
    console.log("======================");
    console.log("useEffect() is called.");
});

ex2)

useEffect(() => {
    console.log("======================");
    console.log("count is changed.");
}, [count]);

useEffect는 첫번째  인자값으로 함수를 필요로 하고 두번째 인자값으로 배열형태의 값을 필요로 한다.

두번째 인자값으로는 배열안에 state의 값이 포함된다.

두번째 인자값은 생략 가능하다

ex1처럼 인자값이 없으면 component가 리렌더링 될 때 마다 함수가 호출된다.

ex2처럼 인자값이 있으면 배열안의 값이 변경되면 함수가 호출된다.

 

4. useMemo란?

useMemo 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook이다.

useMemo는 useEffect처럼 첫번째  인자값으로 함수를 필요로 하고 두번째 인자값으로 배열형태의 값을 필요로 한다.

ex) 

import React, {useMemo, useState} from "react";

const hardCalculate = (hardNumber) => {
    console.log("어려운 계산!");
    var number = 0;
    for (let i = 0; i < hardNumber; i++) {
        number += i;
    }
    return number;
  };

function HardCalculation(props) {
    const initialHardNumber = 335553320;
    const [hardNumber, setHardNumber] = useState(initialHardNumber);

    const increaseHardNumber = () => setHardNumber(hardNumber + 1);
    const maintainHardNumber = () => setHardNumber(hardNumber);
    const decreaseHardNumber = () => setHardNumber(hardNumber - 1);

    const hardSum = useMemo(() => {
        return hardCalculate(hardNumber);
      }, [hardNumber]);

    return (
        <div>
            <h1>{`hardSum ${hardSum}`}</h1>

            <button onClick={increaseHardNumber}>
                +
            </button>
            <button onClick={maintainHardNumber}>
                =
            </button>
            <button onClick={decreaseHardNumber}>
                -
            </button>
            
        </div>
    );
}

export default HardCalculation;

위의 코드는 useMemo Hook이 실제로 재렌더링 사이에 결과를 캐싱하는지 확인 하기 위한 코드이다.

+ 혹은 - 버튼을 누르면 hardNumber의 값이 바뀌게 되어 "어려운 계산!"이라는 로그가 나오게 되고

= 버튼을 누르면 hardNumber의 값에 변화가 없으므로 "어려운 계산!"이라는 로그가 나오지 않는다.

따라서 useMemo를 사용하면 동일한 결과를 불필요하게 계산하지 않을 수 있다.

 

5. Hook 사용시에 유의해야할 점?

• 최상위에서만 사용해야 한다 (if문, 반복문 안에 hook 적지 않을 것)
• 함수 component안에서만 사용해야 한다. (클래스 component내부는 X)

 

출처

https://hini7.tistory.com/105

[React] Hook에 대한 설명 (useState, useEffect, 등장 배경까지)

https://velog.io/@jaychang99/React-%EC%9D%98-useState-%EB%BF%8C%EC%8B%9C%EA%B8%B0

React 의 useState 뿌시기

https://wonyong-jang.github.io/react-redux/2021/05/21/React-useState-useEffect.html

[React] Hooks 이해하기( useState, useEffect ) - SW Developer

https://ko.react.dev/reference/react/useMemo

useMemo – React

https://ko.legacy.reactjs.org/docs/hooks-rules.html

Hook의 규칙 – React