8.3 useReducer - ReactBakSal/ssionii GitHub Wiki

useReducer

μ •μ˜: useState보닀 더 λ‹€μ–‘ν•œ μ»΄ν¬λ„ŒνŠΈ 상황에 따라 λ‹€μ–‘ν•œ μƒνƒœλ₯Ό λ‹€λ₯Έ κ°’μœΌλ‘œ μ—…λ°μ΄νŠΈν•΄ μ£Όκ³  싢을 λ•Œ μ‚¬μš©ν•˜λŠ” Hook.

μƒκΉ€μƒˆ

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

state: ν˜„μž¬ 가리킀고 μžˆλŠ” μƒνƒœ, dispatch: μ•‘μ…˜μ„ λ°œμƒμ‹œν‚€λŠ” ν•¨μˆ˜

μž₯점

μ»΄ν¬λ„ŒνŠΈ μ—…λ°μ΄νŠΈ λ‘œμ§μ„ μ»΄ν¬λ„ŒνŠΈ λ°”κΉ₯으둜 λΊ„ 수 있음.

reducer

μ •μ˜: ν˜„μž¬ μƒνƒœμ™€ μ—…λ°μ΄νŠΈλ₯Ό μœ„ν•΄ ν•„μš”ν•œ 정보λ₯Ό 담은 μ•‘μ…˜ 값을 전달받아 μƒˆλ‘œμš΄ μƒνƒœλ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜. λ°˜λ“œμ‹œ λΆˆλ³€μ„±(μ „μ˜ 정보(?)λ₯Ό κ·ΈλŒ€λ‘œ μœ μ§€ν•˜κ³  μƒˆλ‘­κ²Œ λ§Œλ“€μ–΄μ€˜μ•Ό 함)을 μ§€μΌœμ£Όμ–΄μ•Ό 함.

μƒκΉ€μƒˆ

function reducer(state, action) {
	return { … }; // λΆˆλ³€μ„±μ„ μ§€ν‚€λ©΄μ„œ μ—…λ°μ΄νŠΈν•œ μƒˆλ‘œμš΄ μƒνƒœ λ°˜ν™˜
}

예제

import React, { useReducer } from 'react';

function reducer(state, action){
    // action.type에 따라 λ‹€λ₯Έ μž‘μ—… μˆ˜ν–‰
    switch(action.type){
        case 'INCREMENT':
            return {value: state.value + 1};
        case 'DECREMENT':
            return {value: state.value - 1};
        default:
            return state;
    }
}

const Counter = () => {
    // const [value, setValue] = useState(0);
    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;

μ•‘μ…˜ 값은 μ•„λ¬΄κ±°λ‚˜ 상관 μ—†μŒ. μ•„λž˜ μ˜ˆμ œλŠ” 이벀트 객체가 μ§€λ‹ˆκ³  μžˆλŠ” e.target κ°’ 자체λ₯Ό μ•‘μ…˜ κ°’μœΌλ‘œ μ‚¬μš©ν–ˆμŒ

import React, {useReducer} from 'react';

function reducer(state, action){
    return{
        ...state,
        [action.name] :action.value
    };
}

const Info = () =>{
    const [state, dispatch] = useReducer(reducer, 
        {
            name: '',
            nickname: ''
        });

    const {name, nickname} = state;
    const onChange = e => {
        dispatch(e.target);
    };

    return(
        <div>
            <div>
                <input name="name" value ={name} onChange ={onChange}/>
                <input name="nickname" value ={nickname} onChange ={onChange}/>
            </div>
            <div>
                <div>
                    <b>이름:</b> {name}
                </div>
                <div>
                    <b>λ‹‰λ„€μž„:</b> {nickname}
                </div>
            </div>
        </div>
    )
}

export default Info;
⚠️ **GitHub.com Fallback** ⚠️