useReducer

useState와 같은 상태관리를 해주는 메서드라고 생각하면 된다.

공식 사이트에선 대타로 사용할수 있는 메서드라고 한다.

Reducer는 어떻게 쓸까?

기본적인 구조

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

함수형으로 작성을 했을때 state와 action을 인자로 받는다.

action은 dispatch에서 넘겨준 인자가 들어오게 된다.

여기서 action은 업데이트를 위한 정보를 가지고 있습니다. 주로 type값을 지닌 객체형태로 사용하고, 꼭 따로 지정해야할 규칙같은건 없습니다. 형태가 자유입니다.

const initialState = {conut:0}; 

function reducer(state,action){
	switch(action.type){
    case 'increment':
    	return{count:state.count+1};
    case 'decrement' : 
    	return {count:state.count-1};
	default:
    	throw new Error();
}


function Counter(){
const[state, dispatch] = useReducer(reducer,initialState);
  return(
  <>
  Count:{state.count}
  <button onClick={() => dispatch({type:'decrement'})}>-</button>
  <button onClick={() => dispatch({type:'increment'})}>+</button>
</>)
}

예를 들어 위에 함수가 있다고 하면

dispatch로 type의 decrement를 맨 위에 넘기면 action.type으로 decrement를 받는다.
그리고 Decrement를 state.count를 - 1하게 됩니다.

useReducer의 두번째 부분은 State의 초기값을 넘겨 받게 된다.

이러한 로직으로 돌아가는 함수이고 useReducer는 이런 방식으로 돌아가게 된다는걸 알수가 있었다.

어렵고 복잡해 보이는데 왜쓸까????

솔직히 useState와 다르게 너무 복잡하게 쓰는거 같아서 불편했다.

그치만

함수 컴퍼넌트를 외부로 따로 뺴서 로직을 분리시키고

이러한 점 때문에

재사용이 가능해서 여러번 작성할 필요가 없고, 구조 또한 유연해진다.

추가로

가독성도 굉장히 좋아지는 점이 있다.

그래서 어렵더라도 useReducer를 많이 써보는 노력을 해봐야겠다.

useState와 비슷하면 useReducer만 쓰면 될까?

하지만 그렇다고 useState를 쓰지말자 이런건 아니다 상황에 맞게 알아서 써야하는게 답이다.
컴포넌트에서 관리하는 값이 여러개일 경우에는 useReducer를 쓰라고 얘기 하지만
그렇지 않을때는 useState를 쓰는게 맞다. 예를 들어 단순한 숫자 문자열 boolean값이라던지