Todo list예제를 통한 redux학습하기(1)
리액트를 공부하다 보면 꼭 듣게 되는 ‘Redux’. 언뜻 보기에 잘 이해가 안 가서 이 참에 제대로 정리해보기로 했다. redux 홈페이지에는 redux를 이용한 todo list만들기 예제가 있기 때문에 이를 기반으로 공부해보도록 하겠다.
Redux는 Javascript 앱을위한 예측 가능한 state container이다.
Redux는 개발자가 어플리케이션을 개발 할 때 일관성 있게 작동하고 다양한 환경에서 실행되며 테스트하기 쉬운 코드를 작성하도록 도와준다.
React에 종속된 라이브러리가 아니기 때문에 React외의 다른 view 라이브러리와도 함께 사용가능하다.
redux를 사용하지 않았던 기존의 리액트 앱에서는 부모 컴포넌트에서 자식 컴포넌트까지 props로 전달해주었다면,
Redux를 사용하면 state container를 컴포넌트들과 별개로 생성하여 이를 통해 state를 업데이트하고 각 컴포넌트에 변경 사항을 전달해준다.
먼저, 이전 포스팅에서 만들었던 webpack 4개발 환경에서 개발을 시작한다.
Github Source Code
설치
npm을 이용해 redux와 관련 패키지를 설치한다.
$ npm i --save redux react-redux
$ npm i --save-dev redux-devtools필요성과 원리
Javascript로 제작하는 Single page 어플리케이션이 갈 수록 복잡해지면서, 우리는 이전보다 훨씬 많은 state를 관리해야 할 필요성이 생겨났다. 현재 페이지의 접근 경로나 선택한 탭, 페이지 인덱스 등 다양한 state를 관리해야 하기 때문에 UI상태도 매우 복잡해지고 있다.
수시로 수정되는 수많은 state를 관리하는 방법으로 모델간에 서로 값을 업데이트하는 기존의 방식으로는 특정 뷰가 모델에 대한 값을 업데이트 할 때 개발자가 의도하지 않게 다른 뷰가 업데이트 될 수 있다는 문제점이 있다. 버그 수정이 어렵고, 새로운 기능을 추가하기도 매우 힘든 구조이다.
Redux에서는 모델이 직접 다른 모델에 접근하는 것이 아니라 모든 변경 사항은 ‘action’이 되어 reducer로 전해진다. reducer는 state와 action을 파라미터로 받아 다음 상태를 반환하는 함수이다. 한 번에 모든 state와 action을 관리하는 것은 너무 복잡하기 때문에 상태의 일부만 관리하는 작은 함수들로 표현한다.
redux에는 세 가지 원칙이 있다.
- Single source of truth
전체 앱의 state는 하나의 object tree(store)에서 관리된다. 따라서 서버에서는 클라이언트들의 상태를 일괄적으로 관리하기가 쉬워지고, 디버깅이 편리해지며, ‘실행 취소'나 ‘재실행'등의 기능 구현이 편리해진다.
2. State is read-only
각각의 모델에서 직접적으로 상태를 변경할 수 없고, 상태는 오직 action을 발생시키는 것을 통해서만 가능하다. 모든 action은 단일 창구를 통해서만 발생하기 때문에 경쟁 조건이 없어지고 디버깅과 테스트가 편리하다.
3. Changes are made with pure functions
state가 action에 의해 변환되는 방법은 reducer를 통해서만 가능하다. reducer는 이전 state와 액션을 받아서 업데이트된 state를 반환하는 pure function이다. 이전 state를 업데이트 하는 것이 아닌 새 state를 반환한다는 점을 주의해야 한다. 처음 시작은 하나의 reducer로 시작 할 수 있고 앱의 규모가 커짐에 따라 특정 state를 관리하는 작은 reducer로 분할 할 수 있다.
Counter Vanilla
본격적으로 redux를 이용한 react todo list 앱을 만들어보려고 했으나… 아직 제대로 숙달이 안 된 것 같아 VanillaJS를 이용한 간단한 Counter를 먼저 만들어 보려고 한다.
먼저 html파일이다. 카운터의 숫자가 표현되는 span태그와
숫자 증가, 감소, 홀수 일 때 증가, 1초 후 증가하는 네 가지 버튼을 만들었다.
다음은 actions이다. counter 앱에서는 관리해야 할 state가 숫자 하나이고 이 숫자에 대해서는 증가와 감소, 두 가지의 action이 동작한다.
reducer는 state와 action을 받아 다음 상태의 state를 반환한다. action이 ‘INCREMENT’일 경우 state+1인 state를 생성하여 반환하고, ‘DECREMENT’일 경우 state-1인 state를 반환한다.
마지막으로 index.js에서는 rootReducer를 기반으로 store를 생성하고, view의 value값을 state에 따라 업데이트한다. 각 버튼에는 로직에 따라 action이 dispatch되도록 이벤트를 지정해준다.
완성된 카운터의 모습은 다음과 같다.