[React] 추가 Hooks (useReducer, useCallback, useMemo)

1. useReducer

2. useMemo

3. useCallback

---

1. useReducer

import React, {useReducer} from 'react';

const reducer = (state, action) => {
    switch(action.type) {
        case 'CHANGE_ID':
            return{
                ...state,
                user:{
                    ...state.user,
                    userid:'jenny2'
                }
            }
        case 'CHANGE_NAME':
            return{
                ...state,
                user:{
                    ...state.user,
                    username: action.payload
                }
            }
        case 'ADD_LIST':
            return{
                ...state,
                notice:[
                    ...state.notice,
                    {idx:1, subject:'hihi', content:'bad', date:'2022-04-28'}
                ]
            }
    }
    return state;
};

const initialState = {
    user:{
        userid:'',
        userpw:'',
        username:'',
        userlevel:'',
    },
    notice:[
        {idx:0, subject:'hello', content:'good', date:'2022-04-28'}
    ],
};

const Reduce = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const handleClick = () => {
        dispatch({type:'CHANGE_ID'});
    };
    const handleClick2 = () => {
        dispatch({type:'CHANGE_NAME', payload:'abcdefg'});
    };
    const addList = () => {
        dispatch({type:'ADD_LIST'});
    };
    return(
        <>
            <h2>useReducer</h2>
            <p>
                <button onClick={handleClick}>click</button>
                <button onClick={handleClick2}>click2</button>
                <button onClick={addList}>addList</button>
            </p>
            {JSON.stringify(state)}
        </>
    )
};

export default Reduce;

useReducer는 useState의 대체 함수이다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메소드와 짝의 형태로 현재 state를 반환한다.

 

다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState보다 useReducer를 선호한다. 또한, useReducer는 자세한 업데이트를 발생시키는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달할 수 있기 때문이다.

 

• state : 현재 상태
• dispatch : action을 발생시키는 함수
• reducer : state와 action을 받아 새로운 state를 반환하는 함수
• initialState : 초기 값

React에서 useState 대신 useReducer를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용할 수 있다.

 

 

2. useMemo

const result = useMemo(() => 10, []);

useMemo라는 Hook은 성능 최적화를 위해 사용한다. Memo는 "memoized"를 의미하는데, 이는 이전에 계산한 값을 재사용한다는 의미를 갖고 있다.

 

useMemo의 첫 번째 파라미터는 어떻게 연산할지 정의하는 함수를 넣어주면 되고, 두 번째 파라미터에는 deps 배열을 넣어주면 되는데 이 배열 안에 넣은 내용이 바뀌면 함수를 호출해서 값을 연산해주고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다.

 

 

3. useCallback

import {useCallback, useMemo, useEffect, useState} from 'react';

const Callback = () => {
    const [hi, setHi] = useState(0);
    const [bye, setBye] = useState(0);

    const hiClick = useCallback(() => {
        console.log('hello');
        setHi(hi+1);
    }, [hi]);

    const byeClick = useCallback(() => {
        console.log('world');
        setBye(bye+1);
    }, [bye]);

    const print = () => {
        console.log('call');
    };
    print();

    const result = useMemo(() => 10, []);

    return(
        <>
            {hi}
            {bye}
            <button onClick={hiClick}>hi</button>
            <button onClick={byeClick}>bye</button>
        </>
    )
};

export default Callback;

useCallback은 useMemo와 비슷한 Hook이다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

 

useCallback 없이 선언한 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다. 함수를 선언하는 것 자체는 실제로 메모리도, CPU도 리소스를 많이 차지하는 작업은 아니기 때문에 함수를 새로 선언한다고 해서 그 자체 만으로 큰 부하가 생길 일은 없지만, 한 번 만든 함수를 필요할 때만 새로 만들고 재사용하는 것은 효율성 측면에서 중요하다.

 

주의해야 할 점은 함수 안에서 사용하는 상태 혹은 props가 있다면 꼭 deps 배열 안에 포함시켜야 한다는 것이다. 만약 deps 배열 안에 함수에서 사용하는 값을 넣지 않는다면 함수 내에서 해당 값들을 참조할 때 가장 최신 값을 참조할 것이라고 보장할 수 없다. props로 받아온 함수가 있다면 이 또한 deps에 넣어주어야 한다.