반응형
리액트 프로젝트에서 상태관리에는 여러가지 방법이 있다 props로 넘겨줘도 되고 context api 를 이용해서 관리해줘도 되고 redux를 사용해도 된다. redux가 필수는 아니지만 스케일이 큰 프로젝트 진행시에 상태관리에만 좀더 집중하게 해줄 수 있기 때문에 한번 알아봐두기로 했다.
영화를 찾는 애플리를 만든다치면 최상위에 App 컴포 찾기 컴포 영화목록 컴포 로그인 컴포 영화아이템 컴포등 여러 컴포가 있을텐데 App에 영화데이터를 전부 박아두고 관리해줄 수 있지만 껍데기 밖에 없는 앱 컴포에 영화데이터'만' 두는것 보다 아예 다른 공간(store)을 만들어서 그곳에서 데이터와 로직에 관한것들을 전부 다 관리 하는것 그 개념이 리덕스라고 보면 되겠다.
한 번 처음부터 순서를 밟아보면서 간단히 진행해보자!
우선 라이브러리 두개를 설치해주어야겠다.
npm install redux react-redux // redux 와 react-redux 2개 설치그리고 Reducer를 이용할 건데 폴더 구조는 본인만의 스타일로 습관화를 들이면 좋을 것이다. 앞으로 자주 쓸 것이기 때문에 ㅎㅎ
나같은 경우에는 reducer들을 넣을 폴더와 actions 폴더로 나누었다.
리듀서를 작성해보자
2개의 state를 관리해보기 위해 만들었다.
이렇게 다른 폴더에있는 리듀서를 store에 넣어주기 위해서는 어떻게 할까
src 폴더 밑의 index.js (App 컴포를 렌더링해주고 있는) 파일로 간다.
import {createStore} from 'redux'
const store = createStore(countReducer);이렇게 해주면 성공!! 이라기보다 예시로만해도 이미 2개의 상태값을 관리하는 2개의 리듀서가 있고 규모가 점점 더 커질수록 더 많은 리듀서가 필요하고 또 넣어줘야 될텐데 일일이 넣어 주기에는 가독성도 그렇고 관리하기도 불편하다. 어찌보면 음.. 하나의 부모 리듀서 안에 여러 자식 개념의 리듀서들을 묶어서 관리 할 수 있는 방법이 있다.
포인트는 이곳에서 'combineReducers'를 이용해서 모든 리듀서들을 관리 한다는 것이고 리듀서의 이름을 이곳에서 바꾸어 줄 수도 있다 본인이 원하는대루..
기껏 열심히 리듀서 총집합 시켰으니 다시 스토에어 넣어 주러 가면
원하는 대로 상태값을 잘 나타내고 있는지 확인해주기 위해 하나의 확장 프로그램이 필요하다.
'Redux DevTools Extension' 을 설치해주고 설치가 되면
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()문구를 스토어에 같이 넣어주면서 개발자도구창에서 state 값들을 볼 수 있다.
짜짜짱 여기까지 하고 한번 개발자 도구를 켜보면
리듀서 이름과 초기값들이 잘 나타나있다링.
이제 우리가 만들 리액트 프로젝트를 글로벌하게 감싸주어서 그 안에서 상태값들을 자유롭게 꺼내 쓸 수 있게 해주는 작업만 남았다. 그러기 위해 'Provider'를 react-redux 에서 임포트해주고 감싸주면 끝이다.
이제 우리 머리 위에 혹은 주변에 store를 준비해뒀으니 손만 뻗어서 꺼내 쓰면 되곘다. 한번 App 컴포에서 꺼내 써보장
useSelector, useDispatch 를 react-redux 에서 임포트 해준뒤에 state에 접근할 때 useSelector를 쓰면 된다.
const counter = useSelector(state => state.counter); // counter 접
const isLogged =useSelector(state => state.isLogged); // isLogged 접
dispatch는 액션파일을 임포트하기 위해 쓴건데 리듀서에게 타입명을 전달해주어서 작동하게 만드는 역할이라고 보면 되겠다.
이렇게 state 접근해서 사용하는 것 까지 마무리해보았다. 끝!
반응형