[220428] useReducer

useReducer가 나오게 된 배경

react로 전역상태를 만들기 위해 반드시 사용해야할 redux

react-redux 이렇게 부를 정도로 긴밀한 관계다.

하지만 redux의 단점은 사용할수록 코드가 복잡해지고 계속해서 컴포넌트로 감싸는 wrapper지옥을 만드는 것이다.

이런 단점을 보완하기 위해 hook이 나오면서 react팀은 redux의 reducer를 따로빼서 기능으로 만들었다.

전역상태를 하기 위해 원래 redux에서 사용했던 reducer기능을 가져온것.

( 상태를 바꾸는 코드를 몰아넣을 수 있는게 reducer )

 

 

 

 

 

redux의 단점

const [info,setInfo] = useState(
  {
    user:{
      userid:'',
      userpw:'',
      username:''
    },
    notice:{},
    freeboard:{}
  }
)

여기에서 userid 정보를 수정하고싶다면

  setInfo({
    ...info,
    user:{
      ...userid,
      userid:'수정할 내용'
    }
  })

이렇게 구구절절하게 풀어서 써야한다.
근데 수정할 내용이 많거나 작성해야할 내용이 a4용지 한바닥이면 울고싶어질거임.

이런 단점을 개선하기 위해 hook을 만들때 redux 만든 개발자가 페이스북으로 넘어와서 리액트 개발팀에 합류했고,

react의 단점을 보완하기 위한 hook에 기능을 덧붙였는데 이게 useContext랑 useReducer다.

 

 

 

 

 

useReducer와 redux가 서로 다른 점

redux는 미들웨어랑 반드시 같이 사용해야하는데 그게 saga, thunk다.

axios처럼 요청하는 코드를 모아놓은 모음집같은건데 hook은 이 기능이 없다.

아직가진 대규모 작업을 할땐 아무래도 redux를 사용하고 있음.

 

 

 

 

 

useReducer를 사용하는 목적

상태를 바꾸는 코드를 한 공간에 몰아넣고 싶어서 만든 reducer

useReducer는 상태를 만들고 상태를 변경할 수 있는 함수를 제공한다.

 

 

 

 

 

dispatch 사용하기

useReducer은 상태를 만들고, 상태를 변경하는 함수를 준다.

비슷한 모양인 useState를 보자. useState를 사용해서 value값을 바꾼다고하지만 실질적으로 값을 바꿔주는건 setValue 함수다.

const [value,setValue] = useState(0)

이처럼 dispatch를 발동하면 useReducer는 state값을 바꿔줄 reducer함수를 발동시킨다.

state 기초값을 설정해주는 값은 암묵적으로 initialState를 사용한다.

const [state,dispatch] = useReducer(reducer, initialState)

이처럼 dispatch를 발동하면 reducer메서드가 실행되는 것을 볼 수 있다.

useReducer는 기본적으로 항상 상태값을 reducer로 던져준다.

reducer는 상태값을 변화시키위해서 실행시키는 함수인걸 다시 상기하자.

따라서 상태값을 변화시킨 후에 반환하지 않으면 상태값은 제자리로 돌아갈 수 없고 undefined가 되어버린다.

그러니 반드시 상태값(state)을 반환(return)시켜주자.

import React,{useReducer} from 'react'

const reducer = (state) => {
  console.log('기본적으로 던져주는 state값 : ',state)
  return state
}

const initialState={
  user:{
    userid:'',
    userpw:'',
    userlevel:''
  },
  notice:[
    {idx:0,subject:'1111',content:'aaaa',date:'2022-07-25'}
  ],
}

const Reduce = () => {
  const [state,dispatch] = useReducer(reducer,initialState)
  const handleClick = () => {
    dispatch()
  }

  return(
    <>
      <h2>useReducer 배우기</h2>
      <button onClick={handleClick}>버튼</button>
    </>
  )
}

 

 

 

 

reducer 매개변수 action

보통 reducer에는 매개변수 두개가 들어가는데 하나는 상태값인 state고,

나머지 하나는 state를 어떤 조건에서 어떻게 바꿀것이니 정하는 action값이다.

action안에 CHANGE_NAME이란 문자열이 들어올 경우 userid값을 바꾸기로 switch 문으로 작성했다.

이때 문자열을 action자리에 들어온 type이란 속성이 가져간다.

( 이해가 안가도 버티자 아래에 보면 왜 type이 나타났는지 보인다 )

 

const reducer = (state,action) => {
  console.log('기본적으로 던져주는 state값 : ',state, action)
  
  switch(state.type === 'CHANGE_NAME'){
  	case 'CHANGE_NAME':
    	return{
        	...state,
            user:{
            	...state.user,
                userid:'바꿨다!
            }
        }
        break;
  return state
}

 

dispatch를 선언할때 type에 아까 만들어둔 명령어를 넣어서 객체로 보낸다.

그러면 기본적으로 state값은 넘어가기때문에 state와 action을 reducer가 받게된다.

  const [state,dispatch] = useReducer(reducer,initialState)
  const handleClick = () => {
    dispatch({type:'CHANGE_NAME'})
  }

버튼을 눌러서 dispatch를 날리기 전과 후