앱을 개발 할 때 가장 중요한 부분중 하나가 일관성 있고 구조가 잘 잡힌 로컬 데이터 핸들링 입니다.
리덕스는 앱에 단 하나뿐인 전역 상태 객체로 앱 내 모든 Component에 props로 전달되고 데이터가 수정되면 변경된 데이터가 다시 전달됩니다.
리덕스는 store라는 곳에서 데이터를 관리하고 전역 state를 만들고 관리하는 context(react API)라는 기능을 이용합니다.
리덕스 예제 구현
도서 목록을 관리하는 앱을 통해 리덕스를 구현해 보겠습니다.
1. 리덕스 관련 의존성 라이브러리 설치
npm install --save redux react-redux
*설치 이후에 에뮬레이터 캐쉬를 비워줘야 하는건지 빌드, 실행이 잘 되지 않았네요..
2. actions.js, Books.js 파일을 생성하고 reducers 폴더와 그 아래 bookReducer.js, index.js를 생성합니다.
* 리듀서는 객체를 반환하는 함수로 여러 리듀서들을 묶어 전역 state를 만들게 됩니다.
3. bookReducer.js에 책 객체를 정의하고 state를 반환하는 함수 생성
4. index.js에 루트 리듀서 생성(전역 state생성)
- redex에서 combineReducers import
- bookReducer를 import하여 combineReducers를 통해 루트 리듀서 생성
5. App.js에 리덕스 스토어를 만들고 provider를 통해 자식 Component에서 스토어를 참조할 수 있게 함
- Provider를 react-redux import하여 가져오기
- createStore를 redux import하여 가져오기
- rootReducer(reducers/index.js)를 이용하여 store 객체 생성
- <Provider store={store}>로 감싼 자식 Component에 store를 전달
6. Books.js
* connect 함수를 이용해서 자식 component에서 데이터 참조, 커링함수 : 다른 함수를 반환하는 함수
- connect를 react-redux에서 import
- const {books} = this.props으로 books 데이터를 사용
const mapStateToProps = (state) => ({
books: state.bookReducer.books
})
export default connect(mapStateToProps)(Books)books 배열을 리덕스의 전역 state에서 꺼내 객체를 반환하고 connect 함수의 결과를 외부에 export
7. 책을 추가할 수 있도록 actions.js에 액션 추가하기
- export const ADD_BOOK = 'ADD_BOOK' //리듀서에서 재사용할 수 있도록 상수 export
- addBook이라는 함수를 만들고 type과 추가할 book 객체를 반환
8. bookReducer에서 addBook 액션을 이용할 수 있게 만듦
- actions에서 ADD_BOOK을 import
- bookReducer의 두번째 인자로 action을 추가
- actions.type으로 분기하여 books state를 업데이트 할 수 있도록 로직 추가
* ...state.books는 스프레드 연산자로 기존 배열에 추가할 action.book을 더해서 books 배열을 만듦
9. Books.js에 사용자 이벤트를 통해 정의한 액션이 실행 되도록 처리
- actions에서 addBook, react-redux에서 connect를 import
- name과 author필드를 포함하는 initialState 생성
- updateInput 함수 추가
updateInput = (key, value) => {
this.setState({
...this.state,
[key]: value
})
}* 텍스트가 입력 될 때 마다 불리며 현재 상태(...this.state)에 새로 업데이트 된 key:value로 업데이트 하여 state를 갱신한다고 이해하면 됨
- addBook 함수를 정의, connect를 통해 this.props.dispatchAddBook(this.state)를 호출 할 수 있도록 함
- 위에서 사용할 dispatchAddBook(actions.js의 addBook을 사용)을 connect로 연결하기 위해 아래와 같이 정의
const mapDispatchToProps = {
dispatchAddBook: (book) => addBook(book)
}- export default connect(mapStateToProps, mapDispatchToProps)(Books)
* addBook action을 사용할 수 있도록 mapDispatchToProps를 connect에 전달
리덕스를 통해 데이터 레이어를 분리하고 자식 컴퍼넌트에서 데이터와 액션을 사용할 수 있도록 하는 과정은 아래와 같습니다.
1. 리듀서를 생성하여 사용할 데이터를 정의
2. App.js에 1의 root reducer를 통해 store를 생성, <Provider> 로 store를 하위 component (Books.js)에 전달
3. 하위 component (Books.js)에서 connect를 통해 store를 참조(this.props을 통해 리듀서의 데이터와 함수를 참조 할 수 있다.)
4. actions.js에 리덕스 데이터를 이용한 비지니스 로직인 액션 추가
5. 리듀서에서 4에서 정의한 액션을 통해 데이터가 업데이트 될 수 있도록 정의
6. Component (Books.js)에서 사용자 이벤트를 받아 4에서 정의한 액션이 호출 될 수 있도록 connect를 사용
더해서 추가된 책을 삭제하는 액션을 추가해 보겠습니다.
10. bookReducer.js에 삭제를 위한 로직 추가
* npm i uuid -save 를 통해 id 발급(uuidV4) 모듈 추가
- uuid/v4에서 uuidV4 import
- books 객체에 id : uuidV4() 로 아이디 필드 추가
- REMOVE_BOOK 케이스 처리를 위한 코드 추가
case REMOVE_BOOK:
const index = state.books.findIndex(book => book.id === action.book.id)
return {
books: [...state.books.slice(0, index), ...state.books.slice(index+1)]
}books 목록에서 action을 통해 넘어온 id로 책의 index를 찾고 index에 해당하는 book만 빼고 앞뒤로 잘라 붙여 새로운 books를 리턴
11. actions.js에 uuid, 삭제 로직 추가
- REMOVE_BOOK export, uuid/v4 import
- ADD_BOOK의 book에 id: uuidV4()로 id 필드 추가
- addBook과 비슷하게 removeBook 정의
12. Books.js에 removeBook을 호출 하도록 추가
* 전반적으로 addBook과 비슷한 순서로 진행된다. 처음 addBook을 추가할 때 이해를 잘 해두면 두번은 쉽다?
- removeBook 함수를 추가하고 Remove 텍스트를 눌렀을때 선택된 book객체가 전달될 수 있도록 render에 아래 내용 추가
books.map((book, index) => (
<View style={styles.book} key={index}>
<Text style={styles.name}>{book.name}</Text>
<Text style={styles.author}>{book.author}</Text>
<Text onPress={() => this.removeBook(book)}>Remove</Text>
</View>
))- mapDispatchToProps에 dispatchRemoveBook 키로 removeBook 액션이 실행 되도록 connect
지금까지 리덕스를 통해 데이터 정의, 비지니스 로직, 뷰 컴퍼넌트를 따로 개발할 수 있도록 레이어 분리하는 과정을 실습해 보았습니다.
MVVM 처럼 모델(데이터), 뷰, 비지니스 로직을 분리하는 방식의 아키텍처에 대한 이해가 없다면 왜 이렇게 복잡하게 개발을 해야 하는지 이해하기 힘들 수도 있습니다.
어쨌든 학교에서 실습하듯이 모델, 뷰, 비지니스 로직을 한코드에 때려넣으면 프로젝트의 규모가 커짐에 따라, 개발 팀원들이 모듈을 나눠 개발 하는데 있어 엄청난 부담이 될 수 있습니다.
참고하셔서 요번 포스팅의 실습 내용은 그 구조와 개발 방식을 꼭 이해하고 넘어가시길 바랍니다.
'React native' 카테고리의 다른 글
| 크로스 플랫폼 - AppState API (0) | 2020.01.12 |
|---|---|
| 크로스 플랫폼 - Alert dialog (0) | 2020.01.10 |
| Animation (0) | 2020.01.05 |
| Navigation (0) | 2020.01.02 |
| 고급 Style (0) | 2019.12.29 |
