리액트 심화 [Redux Toolkit]

MARIO·2023년 11월 28일
1

리액트 문법

목록 보기
21/28
post-thumbnail

Redux Toolkit

리덕스 툴킷은 기존의 리덕스를 좀 더 쉽게 사용할 수 있게 개량한 것
기존의 방식과 다르게 Action Value와 Action Creator를 직접 생성해주지 않고
Action Value + Action Creator + Reducer가 하나로 합쳐짐

설치

터미널로 설치

yarn add react-redux @reduxjs/toolkit

사용법

createSlice 를 import 해준뒤 객체 내부에 nmae, initialState, reducer를 필수적으로 작성해줌

export 부분은 두개로 지정
default로 내보내는 건 store에 등록하기 위해
여러개로 내보내는건 컴포넌트에서 사용하기 위해 내보냄

Store에서는 store변수를 만들고 configureStror를 import시켜
내부에 reducer 작성후 export

특징

  1. 기본적으로 reducers의 내용에는 불변성을 유지하지 못하는(가변하는) 메소드를 사용할 수 가 없음.
    불변성을 유지하지 못하면 리액트가 스테이트가 변경 되었는지 알수가 없기 때문
    그러나 리덕스 툴킷은 가능하다


    이유는 리덕스 툴킷 내부에 immer라는 기능이 내장 되어 있기 때문
  • immer는 불변성을 유지하기 위해 사용되는 기능
  1. 사이트에서 리덕스의 내용이 추적가능한 구글 웹앱 devtools 사용 가능
profile
매사에 열심히 하도록.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN