React&Redux 예제
리덕스를 공부하다보면 다양한 패턴때문에 어떤식으로 공부를 해야할지 많이 헷갈렸는데 가장 간편하게 하는 방법은 Ducks패턴을 이용하는 방법인것 같다. action과 reducer를 따로 분리하는게아니라 한곳에 모아두고 액션 type를 헷갈리지 않게 상수변수로(prefix이용)설정하여 이용하는것이다. 사실 정해져있는 방식이 없기때문에 본인한테 가장 편리한 방법을 쓰는게 좋지 않을까 생각한다. 큰 규모의 프로젝트를 진행해본적도없고, 리덕스를 쓸 환경도 없었기때문에 개인적으로 Ducks패턴이 가장 편리했던것같다.
다음과 같은 간단한 기능이다. 리덕스를 사용할때 파일 분리를 어떻게하고, 상태관리를 어떻게 하는지 알기위해 사용해본 간단한 코드라고 생각하면된다.
파일의 구조는 아래와 같다.
Component 폴더에는 프레젠테이셔널 컴포넌트파일을 생성해준다. 프레젠테이셔널 컴포넌트란 리덕스에 직접 접근하지 않고 props로 필요한 값을 받아서 사용한다. UI를 담당한다.
Containers 폴더에서는 리덕스 스토어 상태나 액션을 디스패치 할 수 있는 컴포넌트이다. html을 사용하지 않는다. 자식 컴포넌트(Songdetail, SongList)에게 값을 전달해준다고 생각하면 된다. (Song.js:부모 컴포넌트 [Songdetail.js,SongList.js]: 자식 컴포넌트)
Modules폴더에는 액션 생성함수, 리듀서가 들어있다. index.js에서는 combineReducers함수를 사용하여 여러 리듀서들을 합쳐준다. 여기서는 SelectSong.js에 있는 것만 합쳐주었다. 예를들어 리듀서가 들어있는 파일들이 많아지면 그 파일들을 합쳐주는 곳이 modules/index.js 라고 생각하면된다.
App.js 에서는 containers/Song.js 을 임포트하여 사용.
index.js 에서는 redux의 createStore함수를 가져와서 스토어를 만들어준다.Provider라는 컴포넌트를 불러와 App컴포넌트를 감싸고 props로 스토어를 넣어준다.
Modules
- 상수변수로 액션 타입을 만들어준다.
- 액션 생성 함수를 만들어준다. type으로 구분해주어야 하고 그 뒤에는 변경할 데이터의 값들을 넣어주면 된다.
- 리듀서를 만들때, 초기값이 들어갈 initialState값을 설정해준다. null을 넣어주었다.(아무것도 선택이 되지 않았을때, default=null)
- 리듀서 함수를 만들어준다. 리듀서 함수는 export default로 설정해준다. 액션이 발생하면 그 타입을 보고 리듀서에서 타입값이 같을경우 그에 해당하는 변경사항을 스토어에 보내준다고 생각하면된다.
- SongsReducer라는 상태값이다.
Modules안에있는 index.js파일이다. 원래 여러가지 액션+리듀서 파일들이있을때 최상위 index.js에서 combineReducers로 한곳에 모아준다고 생각하면된다.
App.js index.js
App컴포넌트에서는 Song컴포넌트를 불러온다.
index.js는 최상위 루트파일이다. store를 만들어주고 modules/index.js에서 합쳐준 리듀서를 createStore()함수 안에 넣어준다. Provider를 사용해서 App을 감싸주고 props로 스토어를 넣어준다. 이렇게하면 하위 컴포넌트에서 p store를 조회할 수 있다.
Components
컴포넌트 폴더안에서는 UI 만 담당한다.
container/Song.js
Component폴더에 UI를 담당하는 프레젠테이셔널 컴포넌트들이 있다면 container에는 데이터를 처리하는 비즈니스로직이 들어있다. UI컴포넌트들을 불러오고 props로 데이터를 내려주면 UI에서는 그 props를 사용하기만 하면된다.
useSelector를 사용하여 리듀서의 상태를 조회할 수 있다.
useDispatch함수를 이용하여 액션을 디스패치하는 함수를 생성한다.
udemy강좌에서 나오는 redux예제를 참고하였고, Ducks패턴으로 변경해서 글을 작성했습니다.
