[TIL 2023.07.04] Redux Toolkit / 옵셔널 체이닝?

💻오늘 배운 내용

Redux Toolkit

리덕스를 개량한 것

코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 (a.k.a RTK)

 

툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

 

Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다

=>Slice 라는 API를 사용

// src/redux/modules/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

slice

createSlice 라는 API를 통해 만들 수 있다. 그리고 그 인자로 설정정보를 객체로 받는데,

그 안에 필수로 작성해줘야 하는 값은 name, initialState, reducers (s에 유의)

리듀서 객체 안에서 만들어주는 함수=리듀서의 로직=Action Creator

+) Action Value 까지 함수의 이름을 따서 자동으로...

 

configStore.js 파일에서도

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer 이다.
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것이다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

기존의 createStore, combineReducers 2개의 api를 사용하던 것을 configureStore 하나로 가능해졌다.

 

🧐궁금점과 부족한 내용

'?' 옵셔널 체이닝

비동기 함수를 사용하여 데이터를 가져오고, 그 데이터를 렌더링 하는 코드의 로직에서 에러가 발생했을때

비동기 함수 처리가 완료 되기전에 JSX 부분이 먼저 실행되는 문제이니 옵셔널체이닝을 추가하면 해결이 될 것이라는

솔루션을 받았다. 옵셔널체이닝!? 솔직히 처음 들어봐서 뭔지 검색해보았다.

 

체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고

연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자.

=>프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있도록 해주는 것

 

만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다.

 

?. 앞의 변수는 꼭 선언되어 있어야 한다.

옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.

 

📋레퍼런스

https://velog.io/@posinity/%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9Doptional-chaining-%EC%9D%B4%EB%9E%80

https://rootjang-dev.tistory.com/2