예제를 통해 리덕스(redux)를 연습해봅시다.

먼저 다운로드 해야할 것들이 있습니다.

저번 시간에 만든 버튼 앱에 리덕스를 적용시키려면 우선 다운 받아야할 것들이 있습니다.

yarn add redux react-redux

해당 명령어를 콘솔에서 실행시켜주세요. redux와 react-redux를 다운받을 수 있습니다.

해당 모듈들을 다운로드 했다면 이제 리덕스 폴더를 만들어보도록 하겠습니다.

src/reducers/index.js 파일을 만들어주세요.

예제에서는 리듀서를 하나로 사용하지만 프로젝트가 커지면 여러개의 리듀서를 사용하고 하나로 통합하는 경우도 있습니다. 예제는 간단한 것이 좋으므로 reducers 폴더 안에 index에 모든 것을 다 정의해보도록 하겠습니다.

액션 만들기

먼저 정의해야할 것은 액션입니다. 액션은 어떤 행동을 할 지 정의해주는 것이라고 생각하시면 됩니다. 우리는 버튼을 누르면 증가하는 행동을 원하기 때문에 INCREMENT라는 액션을 정의해주면 됩니다.

//액션 정의하기

cosnt INCREMENT = "INCREMENT";

그리고는 액션 생성 함수를 만들어주시면 됩니다. 액션은 객체로 전달되어야 합니다. 그래서 좀 더 편하게 객체를 만들어주기 위해 정의한 액션을 이용해서 액션 생성 함수를 만들어주는 것입니다.

액션 생성 함수는 객체를 리턴합니다. 이때 type은 필수 키입니다. 타입에 우리가 정의한 액션을 넣어주시면 됩니다.

리듀서 만들기

리덕스는 상태(state)를 컴포넌트 밖에 꺼내놓고 사용하는 것이라고 했습니다. 좀 더 세분화해서 표현하면 전역적으로 있는 상태를 "스토어"라고 합니다. 그리고 그 스토어는 "리듀서"라는 함수를 통해서만 변경될 수 있습니다.

리듀서는 2개의 매개변수를 가집니다. 바로 state와 action입니다. 이전 상태에 액션에 따라 새로운 상태를 리턴하는 것이 리듀서의 역할입니다. 그래서 보기 좋게 표현하기 위해서 내부에 switch 문을 통해서 정의합니다. if - else if - else 구문과 같습니다. switch 옆에 있는 값에 따라서 명령을 실행합니다. initialState는 state의 값이 undefined, 즉 맨 처음 상태일 때 값을 알려주는 것입니다. 우리 컴포넌트 내부의 숫자는 0부터 시작하니 값을 거기에 맞게 전달했습니다.

export default reducer;

이제 리듀서를 내보내면 됩니다. index 파일에서 리듀서 말고 또 하나 내보낸 것이 있습니다. 바로 액션 생성 함수 입니다. 액션을 리듀서에 전달하는 것을 "디스패치"라고 하는데 디스패치할 때에 사용하기 위해 액션 생성 함수도 내보낸 것입니다. 잊지말아 주세요. 버튼을 누르면 숫자가 하나 증가하는 것(버튼을 누르면 액션이 만들어져서 리듀서에 전달됩니다.)을 구현하기 위함입니다.

스토어 만들고 앱과 리덕스 연결하기

리듀서를 만들었으니 이제 스토어를 생성하면 됩니다.

코드를 하나씩 살펴볼까요? 프로젝트의 인덱스 파일에 우선 우리가 만든 리듀서를 갖고옵니다. 그리고 다운로드한 리덕스 모듈에서 createStore 함수를 통해서 스토어를 만들고, 리듀서를 전달하면 됩니다. 스토어를 만드는 방법은 아주 간단하죠? 

리덕스는 리액트만 이용하는 것이 아닙니다. 아주 다양한 곳에서 활용되는 기술이죠. 그래서 리액트 프로젝트에 연결하려면 react-redux 모듈처럼 연결을 도와주는 모듈이 필요합니다. 해당 모듈에서 Provider를 갖고와서 가장 상위 컴포넌트인 App을 감싸주고 store를 전달해주면 리덕스와의 연결을 완료한 것입니다. 아주 쉽죠?

하위 컴포넌트에서 상태 값 가져오기

연결했으니 이제 하위 컴포넌트에서 값을 가져오면 됩니다. 

일단 하위 컴포넌트의 파일 구조를 약간 바꿔볼까요?

저는 components라는 폴더 밑에 Nav와 Button이라는 폴더를 만들고 그 안에 각각 Nav.js와 index.js, Button.js와 index.js 파일을 만들었습니다. 

Button/

Button.js

index.js

Nav/

Nav.js

index.js

위와 같은 형태입니다. Button.js나 Nav.js에는 이전 포스팅에서 사용했던 코드 그대로 사용하시면 되고, index.js를 만든 이유는 이 파일 안에서 리덕스 값을 받아오기 위해서이고, 또 하나는 App.js 등 부모 컴포넌트에서 불러올 때 import Button from './components/Button/Button'이 아니라 from './components/Button'으로 불러오기 위해서입니다.

파일을 찾을 때 우선 index.js를 찾기 때문에 폴더까지만 위치를 설정해두어도 폴더/index 파일을 찾기 때문에 가능합니다.

인덱스 파일 안에서는 무슨 일을 해야할까요? 우선 버튼 부터 살펴보겠습니다.

(전역적으로 있는)상태 값을 컴포넌트의 prop로 갖고 오는 것을 정의하는 함수는 mapStateToProps이고, 액션을 리듀서에 전달하는 디스패치를 컴포넌트의 props에 갖고 오는 것을 정의하는 함수를 mapDispatchToProps라고 합니다. 이 중에서 필요한 것이 있다면 인덱스에서 정의하고, 해당 하위컴포넌트에 연결시켜서 내보내야 합니다.

버튼의 경우엔 number라는 state의 값도 받아야 하고, 클릭하면 또 숫자가 증가해야 한다는 액션도 보내야하니 둘다 필요합니다. 그래서 두 개를 다 정의해주도록 하겠습니다.

이제 이 두 함수를 컴포넌트에 연결시켜보겠습니다.

react-redux에서 connect 함수를 갖고와서 정의한 함수를 전달하고 리턴값에 다시 컴포넌트를 전달해서 내보내면 됩니다.

부모 컴포넌트(App)에서 전달하는 것이 아무것도 없는데도 똑같이 실행되고 있는 것을 확인할 수 있습니다. 

좀 길었지만 리덕스에 대해서 약간은 이해가 되셨나요? 

공감은 제작자에게 큰 힘이 됩니다.