Redux · 소개

Redux는 요즘 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 그러나 많은 사람들이 그것이 무엇이며 그 이점이 무엇인지 혼란스러워합니다.

설명서에서 알 수 있듯이 Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다. 다시 말해서 Underscore.js 및 AngularJS와 같은 기존 라이브러리나 프레임워크가 아니라 애플리케이션 데이터 흐름 아키텍처입니다.

SmashingMag에 대한 추가 정보

• 모바일 앱에 React Native를 고려해야 하는 이유
• 앱, 게임 및 모바일 웹용 테스트 자동화
• React, Node 및 Express를 사용한 서버 측 렌더링
• 클라이언트 렌더링 접근성에 대한 참고 사항

Redux는 2015년 6월경 Dan Abramov가 만들었습니다. Facebook의 Flux와 함수형 프로그래밍 언어인 Elm에서 영감을 받았습니다. Redux는 단순성, 작은 크기(단 2KB) 및 훌륭한 문서 덕분에 매우 빠르게 인기를 얻었습니다 . Redux가 내부적으로 어떻게 작동하는지 배우고 라이브러리에 대해 자세히 알아보려면 Dan의 무료 과정을 확인하는 것이 좋습니다.

Redux는 주로 애플리케이션 상태 관리에 사용됩니다. 요약하자면 Redux는 직접 변경할 수 없는 단일 불변 상태 트리(객체)에서 전체 애플리케이션의 상태를 유지합니다. 무언가가 변경되면 새 객체가 생성됩니다(액션 및 리듀서 사용). 아래에서 핵심 개념을 자세히 살펴보겠습니다.

MVC 및 Flux와 어떻게 다른가요?

약간의 관점을 제공하기 위해 대부분의 개발자가 익숙하므로 고전적인 MVC(모델 보기 컨트롤러) 패턴을 살펴보겠습니다. MVC 아키텍처에서는 데이터(모델), 프레젠테이션(보기) 및 논리(컨트롤러)가 명확하게 구분됩니다. 특히 대규모 애플리케이션에서 이에 대한 한 가지 문제가 있습니다. 데이터 흐름은 양방향입니다. 이는 하나의 변경(사용자 입력 또는 API 응답)이 코드의 여러 위치에서 애플리케이션 상태에 영향을 줄 수 있음을 의미합니다(예: 양방향 데이터 바인딩). 유지 관리 및 디버그가 어려울 수 있습니다.

Flux는 Redux와 매우 유사합니다. 주요 차이점은 Flux에는 애플리케이션의 상태를 변경하는 여러 저장소가 있으며 이러한 변경 사항을 이벤트로 브로드캐스트한다는 것입니다. 구성 요소는 이러한 이벤트를 구독하여 현재 상태와 동기화할 수 있습니다. Redux에는 디스패처가 없으며 Flux에서는 등록된 콜백에 페이로드를 브로드캐스트하는 데 사용됩니다. Flux의 또 다른 차이점은 많은 종류를 사용할 수 있으며 이로 인해 혼란과 불일치가 발생한다는 것입니다.

Redux의 이점

"왜 Redux를 사용해야 합니까?"라고 물을 수 있습니다. 좋은 질문입니다. 다음 애플리케이션에서 Redux를 사용하면 몇 가지 이점이 있습니다.

• 결과의 예측 가능성
  현재 상태를 작업 및 응용 프로그램의 다른 부분과 동기화하는 방법에 대해 혼동 없이 항상 진실의 하나인 저장소가 있습니다.
• 유지보수성
  예측 가능한 결과와 엄격한 구조가 있으면 코드를 더 쉽게 유지 관리할 수 있습니다.
• 조직
  Redux는 코드를 구성하는 방법에 대해 더 엄격하므로 팀에서 코드를 보다 일관되고 쉽게 작업할 수 있습니다.
• 서버 렌더링
  이것은 특히 초기 렌더링에 매우 유용하여 더 나은 사용자 경험이나 검색 엔진 최적화를 제공합니다. 서버에서 생성된 저장소를 클라이언트 측에 전달하기만 하면 됩니다.
• 개발자 도구
  개발자는 동작에서 상태 변경에 이르기까지 앱에서 진행되는 모든 것을 실시간으로 추적할 수 있습니다.
• 커뮤니티 및 생태계
  이것은 라이브러리나 프레임워크를 배우거나 사용할 때마다 큰 장점입니다. Redux 뒤에 커뮤니티가 있으면 사용하기에 더욱 매력적입니다.
• 테스트 용이성
  테스트 가능한 코드를 작성하는 첫 번째 규칙은 한 가지만 수행하고 독립적인 작은 함수를 작성하는 것입니다. Redux의 코드는 대부분 작고 순수하며 격리된 기능입니다.

함수형 프로그래밍

언급했듯이 Redux는 함수형 프로그래밍 개념 위에 구축되었습니다. 이러한 개념을 이해하는 것은 Redux가 작동하는 방식과 이유를 이해하는 데 매우 중요합니다. 함수형 프로그래밍의 기본 개념을 살펴보겠습니다.

• 함수를 일급 객체로 취급할 수 있습니다.
• 함수를 인수로 전달할 수 있습니다.
• 함수, 재귀 및 배열을 사용하여 흐름을 제어할 수 있습니다.
• 순수, 재귀, 고차, 클로저 및 익명 함수를 사용할 수 있습니다.
• 맵, 필터, 리듀스 등의 도우미 기능을 사용할 수 있습니다.
• 기능을 함께 연결할 수 있습니다.
• 상태는 변경되지 않습니다(즉, 변경할 수 없음).
• 코드 실행 순서는 중요하지 않습니다.

함수형 프로그래밍을 사용하면 더 깔끔하고 모듈화된 코드를 작성할 수 있습니다. 범위와 논리에서 격리된 더 ​​작고 단순한 함수를 작성하여 코드를 훨씬 더 쉽게 테스트, 유지 관리 및 디버그할 수 있습니다. 이제 이러한 더 작은 기능은 재사용 가능한 코드가 되어 더 적은 수의 코드를 작성할 수 있으며 더 적은 수의 코드가 좋은 것입니다. 기능은 수정 없이 어디에서나 복사하여 붙여넣을 수 있습니다. 범위에서 격리되고 하나의 작업만 수행하는 함수는 앱의 다른 모듈에 덜 의존하며 이러한 감소된 결합은 함수형 프로그래밍의 또 다른 이점입니다.

기능적 JavaScript로 작업할 때 무엇보다도 순수 함수, 익명 함수, 클로저, 고차 함수 및 메서드 체인을 볼 수 있습니다. Redux는 순수 함수를 많이 사용하므로 이것이 무엇인지 이해하는 것이 중요합니다.

순수 함수 는 전달된 인수를 기반으로 새 값을 반환합니다. 기존 개체를 수정하지 않습니다. 대신 새 것을 반환합니다. 이러한 함수는 호출된 상태에 의존하지 않으며 제공된 인수에 대해 동일한 결과를 하나만 반환합니다. 이러한 이유로 그들은 매우 예측 가능합니다.

순수 함수는 값을 수정하지 않기 때문에 범위나 관찰 가능한 부작용에 영향을 미치지 않으며, 이는 개발자가 순수 함수가 반환하는 값에만 집중할 수 있음을 의미합니다.

Redux는 어디에서 사용할 수 있습니까?

대부분의 개발자는 Redux를 React와 연결하지만 다른 보기 라이브러리와 함께 사용할 수 있습니다. 예를 들어 Redux를 AngularJS, Vue.js, Polymer, Ember, Backbone.js 및 Meteor와 함께 사용할 수 있습니다. 그러나 Redux와 React는 여전히 가장 일반적인 조합입니다. 올바른 순서로 React를 배우십시오. 최고의 가이드는 Pete Hunt's입니다. 이것은 React를 시작하고 생태계에서 일어나는 모든 일에 압도된 개발자에게 매우 도움이 됩니다. JavaScript 피로는 새로운 프론트엔드 개발자와 경험이 있는 프론트엔드 개발자 모두에게 정당한 문제이므로 시간을 내어 React 또는 Redux를 올바른 순서로 올바른 방법으로 배우십시오.

Redux가 멋진 이유 중 하나는 생태계입니다. 많은 기사, 튜토리얼, 미들웨어, 도구 및 상용구를 사용할 수 있습니다. 개인적으로 저는 David Zukowski의 상용구를 사용합니다. React, Redux 및 React Router를 사용하여 JavaScript 애플리케이션을 구축하는 데 필요한 모든 것이 포함되어 있기 때문입니다. 주의 사항: React 및 Redux와 같은 새로운 프레임워크를 배울 때 상용구 및 스타터 키트를 사용하지 마십시오. 모든 것이 어떻게 함께 작동하는지 이해하지 못하기 때문에 더 혼란스러울 것입니다. 먼저 배우고 매우 간단한 앱을 이상적으로는 사이드 프로젝트로 빌드한 다음 프로덕션 앱에 상용구를 사용하여 시간을 절약하세요.

Redux의 일부 구축

Redux 개념은 복잡하거나 화려하게 들릴 수 있지만 간단합니다. 라이브러리는 2KB에 불과합니다. Redux에는 액션, 스토어, 리듀서의 세 가지 구성 요소가 있습니다.

각각이 하는 일에 대해 논의해 봅시다.

행위

간단히 말해서 행동은 이벤트입니다. 작업은 애플리케이션에서 데이터(사용자 상호 작용, API 호출과 같은 내부 이벤트 및 양식 제출)를 저장소로 보냅니다. 상점은 행동에서만 정보를 얻습니다. 내부 작업은 type 속성(일반적으로 상수)이 있는 간단한 JavaScript 개체로, 저장소로 전송되는 정보의 페이로드 및 작업 유형을 설명합니다.

 { type: LOGIN_FORM_SUBMIT, payload: {username: 'alex', password: '123456'} }

액션은 액션 생성자와 함께 생성됩니다. 그건 분명해, 나도 알아. 액션을 반환하는 함수일 뿐입니다.

 function authUser(form) { return { type: LOGIN_FORM_SUBMIT, payload: form } }

앱 어디에서나 작업을 호출하는 것은 매우 쉽습니다. 다음과 같이 dispatch 메서드를 사용합니다.

 dispatch(authUser(form));

감속기

우리는 이미 기능적 JavaScript에서 감속기가 무엇인지 논의했습니다. 콜백(리듀서)을 허용하고 여러 값, 정수 합계 또는 값 스트림의 누적에서 단일 값을 얻을 수 있는 배열 reduce 메서드를 기반으로 합니다. Redux에서 리듀서는 응용 프로그램의 현재 상태와 작업을 취한 다음 새 상태를 반환하는 함수(순수)입니다. 리듀서가 대부분의 작업을 수행하기 때문에 리듀서의 작동 방식을 이해하는 것이 중요합니다. 다음은 현재 상태와 작업을 인수로 취하고 다음 상태를 반환하는 매우 간단한 리듀서입니다.

 function handleAuth(state, action) { return _.assign({}, state, { auth: action.payload }); }

더 복잡한 앱의 경우 Redux에서 제공하는 combineReducers() 유틸리티를 사용하는 것이 가능합니다(실제로 권장됨). 앱의 모든 감속기를 단일 인덱스 감속기로 결합합니다. 모든 리듀서는 앱 상태의 자체 부분을 담당하며 state 매개변수는 모든 리듀서마다 다릅니다. combineReducers() 유틸리티를 사용하면 파일 구조를 훨씬 쉽게 유지 관리할 수 있습니다.

객체(상태)가 일부 값만 변경하면 Redux는 새 객체를 생성하고 변경되지 않은 값은 이전 객체를 참조하고 새 값만 생성됩니다. 성능이 좋습니다. 더욱 효율적으로 만들기 위해 Immutable.js를 추가할 수 있습니다.

 const rootReducer = combineReducers({ handleAuth: handleAuth, editProfile: editProfile, changePassword: changePassword });

가게

Store는 애플리케이션 상태를 유지하고 상태에 액세스하고, 작업을 전달하고, 리스너를 등록하기 위한 몇 가지 도우미 메서드를 제공하는 개체입니다. 전체 상태는 단일 상점으로 표시됩니다. 모든 작업은 감속기를 통해 새 상태를 반환합니다. 이는 Redux를 매우 간단하고 예측 가능하게 만듭니다.

 import { createStore } from 'redux'; let store = createStore(rootReducer); let authInfo = {username: 'alex', password: '123456'}; store.dispatch(authUser(authInfo));

개발자 도구, 시간 여행 및 핫 리로딩

Redux를 사용하기 쉽게 만들려면, 특히 대규모 애플리케이션으로 작업할 때 Redux DevTools를 사용하는 것이 좋습니다. 시간 경과에 따른 상태 변경, 실시간 변경, 작업 및 현재 상태를 보여주므로 매우 유용합니다. 이렇게 하면 console.log 의 현재 상태 및 작업을 방지하여 시간과 노력을 절약할 수 있습니다.

Redux는 Flux와 약간 다른 시간 여행 구현을 가지고 있습니다. Redux에서는 이전 상태로 돌아갈 수 있고 그 시점부터 다른 방향으로 상태를 취할 수도 있습니다. Redux DevTools는 Redux 워크플로에서 다음과 같은 "시간 여행" 기능을 지원합니다(귀하의 상태에 대한 Git 명령으로 생각하십시오).

• 재설정 : 상점이 생성된 상태로 재설정됩니다.
• 되돌리기 : 마지막 커밋 상태로 돌아갑니다.
• Sweep : 실수로 실행했을 수 있는 비활성화된 모든 작업을 제거합니다.
• Commit : 현재 상태를 초기 상태로 만듭니다.

시간 여행 기능은 프로덕션에서 효율적이지 않으며 개발 및 디버깅용으로만 사용됩니다. DevTools도 마찬가지입니다.

Redux는 기능적인 JavaScript를 기반으로 사용하고 작은 독립 함수를 테스트하기 쉽기 때문에 테스트를 훨씬 쉽게 만듭니다. 따라서 상태 트리에서 무언가를 변경해야 하는 경우 해당 상태를 담당하는 하나의 리듀서만 가져와서 격리하여 테스트합니다.

앱 빌드

이 소개 가이드를 마치기 위해 Redux와 React를 사용하여 매우 간단한 애플리케이션을 빌드해 보겠습니다. 모든 사람이 더 쉽게 따라할 수 있도록 ECMAScript 2015 및 2016을 가능한 한 적게 사용하여 평범한 오래된 JavaScript를 고수할 것입니다. 이 게시물의 앞부분에서 시작된 로그인 논리를 계속하겠습니다. 이 예제는 라이브 데이터를 사용하지 않습니다. 이 앱의 목적은 Redux가 매우 간단한 앱의 상태를 관리하는 방법을 보여주는 것이기 때문입니다. 우리는 CodePen을 사용할 것입니다.

1. 리액트 컴포넌트

React 구성 요소와 데이터가 필요합니다. 간단한 컴포넌트를 만들어 페이지에 렌더링해 봅시다. 구성 요소에는 입력 필드와 버튼이 있습니다(매우 간단한 로그인 양식). 아래에서 상태를 나타내는 텍스트를 추가합니다.

2. 이벤트 및 조치

Redux를 프로젝트에 추가하고 버튼에 대한 onClick 이벤트를 처리해 보겠습니다. 사용자가 로그인하는 즉시 LOGIN 유형과 현재 사용자 값으로 작업을 전달합니다. 그렇게 하기 전에 저장소를 만들고 여기에 리듀서 함수를 인수로 전달해야 합니다. 현재로서는 리듀서가 빈 함수일 뿐입니다.

3. 감속기

이제 액션이 실행되었으므로 리듀서는 해당 액션을 취하고 새 상태를 반환합니다. 로그인 상태를 반환하는 LOGIN 작업을 처리하고 나중에 사용할 수 있도록 LOGOUT 작업도 추가해 보겠습니다. auth 리듀서는 두 개의 매개변수를 허용합니다.

1. 현재 상태(기본값이 있음),
2. 행동.

4. 현재 상태 표시

이제 초기 상태(리듀서의 기본값)와 React 구성 요소가 준비되었으므로 상태가 어떻게 보이는지 봅시다. 가장 좋은 방법은 상태를 하위 구성 요소로 푸시하는 것입니다. 컴포넌트가 하나뿐이므로 앱의 상태를 auth 컴포넌트에 속성으로 전달합시다. 모든 것이 함께 작동하도록 하려면 ReactDOM.render 를 함수로 래핑하고 store.subscribe store.subscribe() 에 전달하여 subscribe 도우미 메서드로 저장소 수신기를 등록해야 합니다.

5. 로그인 및 로그아웃

이제 로그인 및 로그아웃 작업 처리기가 있으므로 로그아웃 버튼을 추가하고 LOGOUT 작업을 전달해 보겠습니다. 마지막 단계는 이 로그인을 render 메소드 외부로 이동하고 변수를 아래로 렌더링하여 로그인 또는 로그아웃을 표시할 버튼을 관리하는 것입니다.

결론

Redux는 매일 인기를 얻고 있습니다. 많은 회사(Uber, Khan Academy, Twitter)와 많은 프로젝트(Apollo, WordPress의 Calypso)에서 성공적으로 프로덕션에 사용되었습니다. 일부 개발자는 오버헤드가 많다고 불평할 수 있습니다. 대부분의 경우 버튼 클릭이나 간단한 UI 변경과 같은 간단한 작업을 수행하려면 더 많은 코드가 필요합니다. Redux가 모든 것에 완벽한 것은 아닙니다. 균형이 있어야 합니다. 아마도 간단한 작업과 UI 변경은 Redux 저장소의 일부일 필요가 없으며 구성 요소 수준에서 유지 관리할 수 있습니다.

Redux가 앱이나 프레임워크에 이상적인 솔루션이 아닐 수도 있지만, 특히 React 애플리케이션의 경우 Redux를 확인하는 것이 좋습니다.

첫 페이지 이미지 크레딧: Lynn Fisher, @lynnandtonic