[Javascript] react의 useReducer 사용법 알아보기

[Javascript] react의 useReducer 사용법 알아보기

 

 

 

 

 

useReducer

state가 많을 경우,  state를 하나로 묶어주는 역할을 합니다.

 

useReducer 사용 방법

 

state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고,

 

dispatch 는 액션을 발생시키는 함수입니다.

 

dispatch(action) 함수 안에 파라미터로 액션 값을 넣으면

 

리듀서 함수가 호출되는 구조입니다.

 

state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여

 

reducer 함수의 action을 불러와 state 값을 변경합니다. 

 

useReducer 문법

//state 초기값 세팅
const initialState = {
  winner: ' ',
}

//export로 모듈화, 변수로 지정, 다른 컴포넌트에서 재사용 가능
export const SET_WINNER = 'SET_WINNER';

//reduce 함수
const reducer = (state, action) => { //state를 어떻게 바뀌는지 코드
  switch (action.type) {
    case SET_WINNER: { //action 이름
      //state.winner = action.winner는 안됨, 새로운 action 객체를 만들어서 바뀐 값만 업데이트
      return {
        //새로운 state를 만들고 바뀌는 부분만 바꿔줌   
        ...state, //spread 문법 = 기존 state를 새롭게 얕은 복사(참조) 
        winner: action.winner, //바뀌는 부분
      }
    }
    default:
      return state;
  }
}

//action dispatch(reduce 함수의 해당 action을 실행)
const 컴포넌트 = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
   const onClick 함수 = useCallback(() => {
        dispatch({ type: 'SET_WINNER', winner: 'O'}) //dispatch({ action 객체 })
    //}, []); //하위 컴포넌트에 들어가는 함수는 useCallback() 적용

  return (
  	...
  );
}

export default 컴포넌트;

 

useReducer를 사용하는 이유?

 

 

useReducer는 state를 업데이트 할 때에는 useState가 아닌, 

 

새로운 상태를 설정하는 방법이 입니다. 

 

이 Hook 함수를 사용하면 컴포넌트의 state 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다.

 

state 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고,

 

또는 다른 파일에 작성 후 불러와서 사용 할 수도 있습니다. 

 

useReducer 필요 요소?

 

state

데이터, 초기값, 바뀌는 값

 

이벤트

이벤트를 이용하여 state 변경

 

action 

 

수정할 data이고 객체 형식입니다.

Type과 data로 구성되었고, action의 이름은 대문자로 표기합니다.

Action 하나하나가 redux에 기록이되어 나중에 버그 잡을때 편합니다.

reducer 함수

action을 어떻게 바꾸는지(처리하는지) 나타냅니다.
(주로 swtich 이용합니다.)

이전 state와 action을 받아서 다음 state를 돌려주는 함수입니다.

 

redux 와의 차이점?

redux는 state가 동기적으로 바뀌지만, useReducer는 state가 비동기적으로 바뀝니다. 

 

context API

부모로부터 하위간의 레벨이 많을 경우, 계속해서 props로  dispatch를 넘겨줘야 하는

 

번거로움을 해결하기 위해  context API를 사용합니다.