(TIL11) React 함수형 컴포넌트_useReducer

져니·2021년 7월 13일

React

목록 보기

11/12

1. useReducer란❓

상태관리를 해주는 Hooks 기능 중 하나!!!
useReducer를 이용함으로써 상태값을 변경하는 로직을 다른 곳에서 처리할 수 있습니다!
또한, useReducer는 함수형 컴포넌트에서의 Redux를 어느정도 대신하는 역할을 한다고 합니다.

2. useReducer사용법

이전 포스팅에서 useState로 썼던 상태값을 useReducer로 써보겠습니다

useState코드: const [hello,setHello] = React.useState('Hello function component')
useReducer코드: const [hello,dispatch] = React.useReducer(reducer,'초기값')

const [변수명,dispatch] = React.useReducer(조건에 따라 변경시킬 내용을 담은 컴포넌트,'초기값')

useReducer 코드를 하나하나 분해해서 보면

변수명: useState와 마찬가지로 상태값 이름
dispatch: 조건을 담을 객체
조건에 따라 변경시킬 내용을 담은 컴포넌트 : 예시에서는 reducer라는 이름으로 지정, 하지만 이는 임의값으로 원하는 이름으로 지정해주면 된다.
초기값: useState와 마찬가지로 초기값을 설정해주는 곳

useState에서는 hello에 새로운 값을 집어넣기 위해 setHello를 사용하였지만,
useReducer에서는 dispatch와 reducer컴포넌트를 사용합니다!

이것만 보면 이해가 잘 안될 수 있으니 예시코드를 보여드리겠습니다.

3. useState코드와 useReducer코드 비교해보기

useState와 useReducer 각각을 사용하여 다음의 컴포넌트를 만들어보겠습니다.

1) 초기값 0
2) +1 버튼을 누르면 1씩 증가
3) -1버튼을 누르면 1씩 감소

1) ✔ useState 사용

const Counter = ()=>{
    const [number,setNumber] = React.useState(0)

    const onUp = ()=>{
        setNumber((n)=>n+1)
    }

    const onDown = ()=>{
        setNumber((n)=>n-1)
    }

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


    )
}

💻 결과물

hooks안 state값에 숫자가 담긴 것을 확인할 수 있습니다.

2) ✔ useReducer 사용

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] = useReducer(reducer,0)

    const onUp = () =>{
        dispatch({type:'Up'})
    }
    const onDown = () =>{
        dispatch({type:'Down'})
    }
    return (
        <>
            <div>{number}</div>
            <button onClick={onUp}>+1</button>
            <button onClick={onDown}>-1</button>
        </>
    )
}