리팩토링 3일차!!

오늘은 드디어 리덕스를 적용해 보았다.

1️⃣ 리덕스

리덕스는 상태관리툴(State Management Tool)인데, 리액트를 활용하여 프로젝트를 진행하다보면 컴포넌트가 많아질경우, depth, 즉 깊이가 깊어지게 된다.

깊이가 깊어진다란? 부모컴포넌트에서 자식컴포넌트에 값을 전달해 줄경우, 컴포넌트가 많아지면 부모(값) > 자식 > 자식 > 자식 > 자식(값) 이런식으로 반복적으로 컴포넌트에 값을 전달해야 된다. 이 컴포넌트가 많을 경우, prop가 깊어진다라고 하는데,

리덕스를 활용하면 값(value)을 중앙저장소(store)에서 관리를 하여 필요한 컴포넌트에서 바로 사용할 수 있다는 장점이 있다.

나는 리덕스를 조금더 쉽게 활용할 수 있도록 redux-toolkit을 활용하였다.

현재 리팩토링 진행중인 페이지도 컴포넌트가 많기 때문에 활용해 주었다.

처음으로 store 폴더를 생성해 주자!

import { configureStore } from 'reduxjs/toolkit

export default store = configureStore({
	reducer: {}
})

스토어를 생성 했으면, 이제 react에서 store를 사용할 수 있게 적용해주자.
현재 코드는 내가 프로젝트에 작성한 코드를 사용하는 것이므로, 경로가 다를 수 있으니,
redux 공식문서에서 튜토리얼을 찾아볼 수 있다.

import { store } from './pages/store/store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <Router />
  </Provider>
);

Redux State Slice 를 생성하자,

나는 상품 데이터를 받아와야 되는데, 정보가 배열에 담겨있다보니, 초기값(initialState) 를 빈 배열로 지정해주었다.

여기서 리듀서는 '상태를 교체해 주는 함수' 로써 이전 상태를 새로운 상태로 교체할 수 있다.

그리고 선언한 함수 getProductData를 사용해야되기 때문에, export 해주자!

그렇게 하면 이제 컴포넌트안에서 사용이 가능하다.

useSelector를 이용해 store에 있는 데이터를 읽을수가 있고, dispatch 를 활용하여 reducer함수를 동작시킬 수 있다.

위 사진 처럼도 적용이 가능하다.

이번 리팩토링은 redux를 중점적으로 담아보았는데, 진짜 리팩토링은 끝이 없는거 같다. 그래도 옛날 나의 코드를 보면서 느끼는건 그래도 내가 조금은 성장했두나! 라는것을 느낄 수 있었다.

다음 리팩토링을 향해 더 정진하자!