React-Hooks(2)

1. useReducer

1.1. useReducer란?

: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을때 사용하는 Hook이다.
useState를 사용할때는 컴포넌트 업데이트 로직을 컴포넌트 내부에서 이루어졌어야했는데 useReducer는 컴포넌트 바깥으로 빼낼 수 있고 이것이 큰 장점이다.

여기서 reducer는 현재상태, 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수이다.

1.2. 사용법

1. useReducer의 첫번째 파라미터에 리듀서 함수를 넣고, 두번째 파라미터에는 초기값을 넣어준다.
2. 이 hook을 사용하면 state값과 dispatch함수를 받아온다. 여기서 state는 현재 가리키고 있는 상태이고 dispatch는 액션을 발생시키는 함수이다.
3. 함수안에 파라미터로 액션 값을 넣어주면 리듀서함수가 호출되는 구조이다.

import React, {useReducer} from 'react'

function reducer(state, action){
    switch(action.type){
        case 'INCREMENT' : // value에 1을 더하는 액션
             return {value : state.value +1};
        case 'DECREMENT' : // value에 1을 빼는 액션
             return {value : state.value -1};
        default:
            return state;
    }

}

const Counter = () =>{
    const[state, dispatch] = useReducer(reducer, {value : 0});

    return(
        <div>
            <p>
                현재 카운터 값 : <b>{state.value}</b>
            </p>

            <button onClick={() => dispatch({type : 'INCREMENT'})}>+1</button>
            <button onClick={() => dispatch({type : 'DECREMENT'})}>-1</button>

        </div>
    );

}

export default Counter;

2. useMemo

2.1. useMemo란?

: 컴포넌트의 성능을 최적화 하는데 사용되는 hook이다.
useMemo에서 memo는 memoization을 뜻하는데 이는 메모리에 넣기라는 의미이며 동일한 값을 반환하는 함수를 반복적으로 호출해야할때 처음 값을 계산할때 해당 값을 메모리에 저장한 뒤 필요할때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용해 실행 속도를 빠르게 하는 기술이다.
쉽게말해서 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook이다.

2.2. 사용법

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

function App(){
    const [number, setNumber] = useState(0);
    const [success, setSuccess] = useState(true);

    const succ = useMemo( () => {
      return{
        isResult: success ? '성공' : '실패'
      }
    },[success])

    useEffect(() => {
      console.log("useEffect 호출");

    },[succ])

    return (
    <>
      <h2> 하루에 담배 몇개 피세요?</h2>
      <input type="number" value={number} onChange={(e) => setNumber(e.target.value)}/>
      <hr/>

      <h2>현재 금연성공??? 실패???</h2>
      <p>현재: {succ.isResult}</p>
      <button onClick={() => setSuccess(!success)}>update</button>
    </>
    );
}

export default App;

주의사항 : 값을 재활용하기 위해 따로 메모리를 사용해 저장해놓기때문에 불필요한 값을 모두 memoization 해버리면 성능이 안좋아질 수 있다. 그렇기때문에 필요할때만 사용하도록 하자.