본문 바로가기
Web Study

리덕스 사용을 위한.. useReducer 개념

by 쿠리의일상 2023. 4. 7.

컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 기능

 

reducer 

현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수를 지칭

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

리듀서에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.

  • action 은 업데이트를 위한 정보
  • type 은 객체 형식이지만 정해진 규칙은 없음 - 관습상 대문자와 _로 구성

 

useReducer

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

state 는 컴포넌트에서 사용할 수 있는 상태

dispatch 는 액션을 발생시키는 함수 ---> dispatch({ type : '~~~' }) 처럼 사용

 

useReducer() 의 첫번째 파라미터는 reducer 함수이고 두번째 파라미터는 초기 state 값이다.

 

'Web Study' 카테고리의 다른 글

리덕스 정리 - 1  (0) 2023.04.10
리액트와 리덕스로 TodoList 만들기 (삭제, 완료, 추가)  (0) 2023.04.09
useContext ?  (0) 2023.04.04
React.memo()에 대해  (0) 2023.04.03
벨로퍼트 모던 리액트 정리 1  (0) 2023.04.03