리팩토링 3일차!!
오늘은 드디어 리덕스를 적용해 보았다.
리덕스는 상태관리툴(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를 중점적으로 담아보았는데, 진짜 리팩토링은 끝이 없는거 같다. 그래도 옛날 나의 코드를 보면서 느끼는건 그래도 내가 조금은 성장했두나! 라는것을 느낄 수 있었다.
다음 리팩토링을 향해 더 정진하자!