리덕스 실습 (1)

lilyoh·2020년 11월 20일

이론적으로 알고 있지만 코드로 구현해보지 못했던 리덕스.
리덕스를 실제로 코드로 쳐보기 위해서 여러 가지 실습을 해보려고 한다.
첫 번째로 벨로퍼트의 카운터 만들기 실습을 해봤다.
실습을 하며 기억하고 싶은 내용을 간단하게 정리한다.

🧡 디렉토리 생성

src 디렉토리 내부에 아래의 디렉토리들을 생성한다.

action: 액션타입과 액션생성자 파일이 저장된다.
components: 뷰를 담당하는 presentational 컴포넌트들이 저장된다.
containers: store 에 접근할 수 있는 container 컴포넌트들이 저장된다.
reducers: 스토어의 기본 상태와 상태 업데이트를 담당하는 리듀서 파일이 저장된다.
utils: 컴포넌트들에 공용되는 파일이 저장된다.

🧡 presentational / container component

뷰만을 담당하는 컴포넌트와 데이터를 관리하는 컴포넌트를 나누는 구조.
프로젝트를 이해하기 쉽고 컴포넌트를 재사용하기 좋다.

presentational compoenent
- 뷰만을 담당하는 컴포넌트
- 스토어에 직접 접근할 수 없고 props 로만 데이터를 받을 수 있다.
- ui 에 관련될 경우 state 를 가질 수 있다.
- 주로 함수형 컴포넌트로 작성되고, state 를 가질 경우에는 class 형으로 작성되기도 한다.
container component
- 스타일을 가지고 있지 않고 감싸는 용도로만 사용된다.
- 상태를 가지고 있고 스토어에 직접 접근이 가능하다.
- 페이지, 리스트, 헤더, 사이드바, props 가 여러 컴포넌트를 거쳐야 하는 경우 사용한다.

🧡 Actions

액션 타입
- 액션 타입은 액션의 이름이다. 리듀서는 액션 타입에 따라 다른 작업을 수행한다. 액션 타입은 문자열로 관리하면 힘들기 때문에 ActionType.js 파일을 따로 만들어 관리한다.
액션 생성자
- 액션을 만들 때마다 객체를 만들기는 힘들기 때문에 index.js 파일 내에 액션 객체를 생성하는 '액션 생성자' 를 미리 만들어준다.

🧡 Reducer

리듀서에서는 초기 상태를 정해준다.
리듀서 함수에서는 현재 상태와 액션 객체를 파라미터로 받고
액션 타입에 따라 state 값을 다르게 변경하는 switch 문을 작성한다.

🧡 Store

src 디렉토리 안의 index.js 파일에서 스토어를 생성한다.
createStore 함수를 불러온 다음에 파라미터로 리듀서를 넣으면 된다.

🧡 Provider 를 사용해 리액트 앱에 store 연동

리액트 앱에 store 를 손쉽게 연동하기 위해서
react-redux 라이브러리에 내장되어 있는 Provider 를 사용한다.
store 를 연동할 컴포넌트를 provider 로 감싸고 props 로 store 를 설정한다.

🧡 Container

뷰를 담당하는 컴포넌트와 데이터를 관리하는 컴포넌트를 나누는 식으로 리덕스 구조를 짜기로 했다. 데이터를 관리하는 컨테이너 컴포넌트를 store 에 연결하기 위해서는 react-redux 의 connect 함수를 사용한다. connect 함수의 파라미터로 1. 컴포넌트에 연결시킬 상태와 2. 액션함수를 전달한다. 그러면 컴포넌트를 리덕스 스토어에 연결시키는 또 다른 함수를 반환한다. 이 리턴된 함수의 파라미터로 뷰를 담당하는 컴포넌트를 넣어준다. 그러면 최종적으로 리덕스 스토어에 연결된 컨테이너 컴포넌트가 생성된다.

컴포넌트에 연결시킬 상태와 액션함수를 정의할 때는 각각 함수를 만든다.
state 를 파라미터로 받는 함수와 dispatch 를 파라미터로 받는 함수를 만든다.
이 함수로 객체를 반환하고 이를 props 로 사용한다.

-> 상태를 연결하는 mapStateToProps 함수와 액션 함수를 연결하는 mapDispatchToProps 함수를 만들어서 connect 함수에 전달해주고 전달받은 함수에 Counter 컴포넌트(뷰 담당) 를 전달하여 컨테이너 컴포넌트를 내보낸다.