14일차 리덕스 툴킷 - 생활코딩! React 리액트 프로그래밍

지난 편에 redux에 대해 공부했다. 아래는 그 포스트.

13일차 react-redux - 생활코딩! React 리액트 프로그래밍

 

이 번 편은 redux조차도 불편해서 만든 redux toolkit(RTK)이라는 모듈에 대한 교육이다.

위 포스트의 순수 redux 코드를 RTK로 바꿔서 코딩해 보았다.

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';

const css = `
  div {
    border-radius: 3px;
    border: 3px solid gray;
    margin: 10px;
    padding: 10px;    
  }
`;

const colorSlice = createSlice({
  name: 'color',
  initialState: 'black',
  reducers: {
    black: () => 'black',
    green: () => 'green'
  }
});
const store = configureStore({reducer:{color:colorSlice.reducer}});


function Top1() {
  return (
    <div>
      <h3>Top1</h3>
      <Top2 />
    </div>
  ); 
}

function Top2() {
  return (
    <div>
      <h3>Top2</h3>
      <Top3 />
    </div>
  );
}

function Top3() {
  const color = useSelector(state => state.color);
  const dispatch = useDispatch();

  return (
    <div>
      <h3 style={{ color }} onClick={() => dispatch({type: color === 'black' ? 'color/green' : 'color/black'})}>
        Top3
      </h3>
    </div>
  );
}

function Bottom1() {
  return (
    <div>
      <h3>Bottom1</h3>
      <Bottom2 />
    </div>
  );
}

function Bottom2() {
  return (
    <div>
      <h3>Bottom2</h3>
      <Bottom3 />
    </div>
  );
}

function Bottom3() {
  const color = useSelector(state => state.color);
  const dispatch = useDispatch();

  return (
    <div>
      <h3 style={{ color }} onClick={() => { dispatch({type: color === 'black' ? 'color/green' : 'color/black'})}}>
        Bottom3
      </h3>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <style>{css}</style>
      <Top1 />
      <Bottom1 />
    </Provider>
  );
}

export default App;

 

셋업 부분과 이용하는 부분에 조금 변화가 있다. 뭔가 좀 더 정돈되어 보인다. 무엇보다 순수 redux와 RTK의 차이는 slice의 유무이다. RTK는 redux store를 slice라는 단위로 쪼개고 각 slice의 접근성(scope)을 제어할 수 있다. 매우 유용할 것 같은데, 순수 redux는 이 기능을 사용자가 직접 설계/구현해줘야 한다. 이 때문에 처음부터 RTK를 이용해야 한단다.

 

사족...

기존에 관리했던 프로젝트는 트렌디하게 zustand를 이용했는데, redux를 공부해보니 redux를 그냥 써도 무방했을 것 같다.