[React] useReducer

import React from 'react'

const reducer = (number, action) =>{
    switch(action.type){
        case 'UP':
            return number+1;
        case 'DOWN' :
            return number-1;
        default:
            return number;
    }
}

const Counter = () => {
    const [number, dispatch] = React.useReducer(reducer, 0)

    const onUP = () => {
        dispatch({ type: 'UP' })
    }

    const onDown = () => {
        dispatch({ type: 'DOWN' })
    }

    return (
        <div>
            <h2>{number}</h2>
            <button onClick={onUP}>+1</button>
            <button onClick={onDown}>-1</button>
        </div>
    )
}

export default Counter

 

useReducer

const [변수명,dispatch] = React.useReducer(함수,초기값)

 

[이 파일에서는]

이러한 counter를 만들어보자

❗ 함수
const reducer = (number, action) =>{
    ...
}

❗ dispatch
const Counter = () => {
    const [number, dispatch] = React.useReducer(reducer, 0)
    ...
}

1.  문법

const [number, dispatch] = React.useReducer(reducer,0)
reducer : 함수

 

🔵  dispatch

✅ number 라는 값을 바꾸기 위해서 dispatch를 써야한다

✅ dispatch는 setState 쓰듯이 쓰면 된다 - dispatch({ 인자값변수:'인자값' })

 

✅ dispatch가 실행되면 reducer 함수가 실행되고,

        type 과 같은 인자값이 reducer 안으로 들어가게 된다.

✅ reducer는 총 두개의 인자값을 받아준다
        number : 상태값을 첫번째 인자값으로 받고,

        action : 안에 있는 객체값을 받는다

 

✅ reducer에서 return을 쓰는 이유는?
        -> 여기서는 변하는 값만 반환해줘야 하기 때문

2.  쓰는 위치

1) 컴포넌트 바깥

reducer를 쓸때는 컴포넌트 밖에다 놓자

2) 파일을 분리

/component/counter/reducer.js
다른 파일에 reducer 를 만들고
export 앞에다 붙여주고
가져올곳에서는 import { reducer } from './reducer'
이렇게 해주면 쓸 수 있다

 

 

Redux랑 비슷한 기능을 한다 - reducer

그래서 Context 와 reducer를 사용하면 어느정도 Redux 를 사용한 효과를 낼 수 있지만
비동기 처리를 위해서는 Redux를 사용하는 것이 좋다.

 

 

 

+) export

export default 함수 : 함수 하나만 보내는거 

각각 보내려면 const 앞에다가 export 붙여주면 됨
그리고 받아올때는 대괄호 { } 를 써서 받아주면된다.