Additional Hooks

추가적으로 React에서 제공하는 훅

1. useReducer

• 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우
• 다음 state가 이전 state에 의존적
• Redux를 안다면 쉽게 사용 가능

ex) Example5.jsx

import {useReducer} from "react";

// reducer => state로 변경하는 로직이 담겨 있는 함수
const reducer = (state, action) => {
    if (action.type === "PLUS") {
        return {
          count : state.count + 1
        };
    }

    return state;
}
// dispatch => action 객체를 넣어서 실행
// action => 객체이고 필수 프로퍼티로 type을 가진다.
const Example5 = (props) => {
    const [state, dispatch] = useReducer(reducer, {count : 0});

    const handleOnClick = (e) => {
        dispatch({type : "PLUS"});
    };

    return (
        <div>
            <p>You Clicked {state.count} Times</p>
            <button onClick={handleOnClick}>Click me</button>
        </div>
    );
};

export default Example5;

2. useMemo
3. useCallback

ex) Example6.jsx

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

const sum = (persons) => {
    console.log("sum...");
    return persons.map(persons => persons.age).reduce((l, r) => l + r, 0);
}

const Example6 = (props) => {
    const [value, setValue] = useState("");
    const [persons] = useState([
        {name: "Mark", age: 39},
        {name: "Manna", age: 28},
    ])

    // persons 객체가 변하지 않으면 다시계산하지 않는다.
    // 함수가 매번 새로 생성되는 경우 ,최적화의 어려움
    const count = useMemo(() => {
        return sum(persons);
    }, [persons]);

    // 함수를 언제 셋팅해줄것인지 판단함
  	// 첫번째 실행된 값을 가지고있음
    const click = useCallback(() => {
       console.log(value);
    }, []);

    const handleOnChange = (e) => {
        setValue(e.target.value);
    };

    return (
        <div>
            <input value={value} onChange={handleOnChange} />
            <p>{count}</p>
            <button onClick={click}>click</button>
        </div>
    );
}

export default Example6;

4. useRef
   ex)Example7.jsx

import {createRef, useRef, useState} from "react";

const Example7 = (props) => {
    const [value, setValue] = useState("");
    const input1Ref = createRef(); // render를 항상 유지 하지 않음
    const input2Ref = useRef(); // render가 실행 됬을 경우도 유지

    console.log(input1Ref.current, input2Ref.current);

    const handleOnChange = (e) => {
        setValue(e.target.value);
    };

    return (
        <div>
            <input value={value} onChange={handleOnChange} />
            <input ref={input1Ref} />
            <input ref={input2Ref} />
        </div>
    );
}

export default Example7;