Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

리플렉스 플럭스 아키텍처 시작하기

by
Difficulty:IntermediateLength:LongLanguages:

Korean (한국어) translation by h1ghqlty. (you can also view the original English article)

Final product image
What You'll Be Creating

이 튜토리얼에서는 Facebook의 Flux 아키텍처와 React 기반 애플리케이션에서 데이터 흐름을 처리하는 방법에 대해 배웁니다. Flux의 기본을 다루고 개발의 동기를 이해 한 다음 간단한 가상 지갑 응용 프로그램을 작성하여 배운 내용을 연습 해 보겠습니다.

이 튜토리얼에서 Flux를 사용해 본 적이 없지만 Flux에 대해서는 경험이 없다고 가정합니다. Flux의 기본 지식을 이미 알고 있고 더 깊은 이해를 얻으려고 한다면 뭔가 빠져 나올 수 있습니다.

React 현장을 처음 보신 분이라면 David East의 Envato Tuts +에있는 Getting Started With React 과정을 방문하시기 바랍니다. 빠른 속도로 빠른 속도를 낼 수있는 환상적인 과정입니다.

Flux 란 무엇입니까?

Flux는 주로 Facebook에서 개발한 애플리케이션 아키텍처 개념이지만 같은 용어는 공식 구현을 나타내는 라이브러리를 의미합니다.

Facebook은 대규모 코드베이스에서 MVC 패턴으로 인한 문제를 해결하기 위해 Flux와 함께 나섰습니다. 그들은 조치가 예측할 수 없는 결과를 초래하는 계단식 업데이트 및 디버그하기 어려운 코드를 유발한 문제로 어려움을 겪었습니다. 이전에 MVC 프레임 워크를 사용했다면 익숙하게 들릴지도 모릅니다. 대부분 MVC 프레임 워크가 밀접하게 결합되는 경향이 있기 때문입니다. 믹서에 관찰자와 양방향 데이터 바인딩을 추가하면 당신은 적당한 골치거리를 갖게됩니다.

나의 충고는 Flux와 MVC 사이의 공통점을 찾는 시도를 피하는 것입니다. 혼란을 줄이는 것 외에는 별로 도움이 되지 않을 것입니다. Flux는 사물을 다르게 해결하려고 시도하고 그것을 다른 패턴과 비교하려고 시도해도 도움이 되지 않습니다.

프로젝트 설정

튜토리얼을 따르려면 먼저 필요한 소프트웨어가 설치되어 있는지 확인하십시오. 작업을 마쳤으면 이 기사와 함께 준비한 GitHub 저장소에서 boilerplate를 복제하십시오.

이 기사를 작성할 당시에 설치 한 소프트웨어 요구 사항과 버전은 다음과 같습니다.

  • Git: 2.11
  • Node.js: 6.9
  • NPM: 3.10
  • Yarn: 0.22
  • 선택한 편집자

보일러 플레이트는 곧 출시 될 작은 프로젝트인 작은 가상 지갑 응용 프로그램의 출발점 역할을합니다. 여기에는 ES6 구문을 일반 JavaScript로 변환하기위한 Webpack 구성과 파일을 제공하기 위한 WDS가 포함되어 있습니다. 또한 CSS 구성 요소 스타일이 있으므로 코딩 작업을 바로 시작할 수 있습니다.

필요한 모든 의존성을 설치하려면 프로젝트 디렉토리에 cd하고 yarn를 실행하십시오.

다음 섹션에서는 Flux를 통합하기 전에 응용 프로그램의 핵심 구성 요소를 설정합니다. 더 많은 혼란을 가져올 것이라고 생각하면서 저는 이것을 상용구에 포함시키지 않았습니다. 앱을 만드는 데 관심이 없다면이 단계를 건너 뛰고 다음 섹션으로 넘어갈 수 있습니다.

구성 요소 설정

먼저 응용 프로그램의 진입 점 역할을하는 js/index.js 내에 다음 코드를 포함시킵니다.

기본 <App />  구성 요소의 경우 App.js라는 js/components 내에 새 파일을 만들고 다음 코드를 추가합니다.

<App />구성 요소는 두 개의 다른 구성 요소를 래핑합니다. 하나는 새 항목을 추가하는 폼이고 다른 하나는 항목 목록입니다. <AddNewItem />  구성 요소를 만들려면 js/components 안에 AddNewItem.js라는 새 파일을 만들고 다음 코드를 추가하십시오.

구성 요소는 양식 필드가 업데이트 되고 일부 기본 유효성 검사가 수행 될 때 상태를 업데이트하기 위한 일부 논리를 묶습니다. 이 코드를 사용하여 항목 목록에 대한 js/components/ItemsList.js의 마지막 항목을 만들어 구성 요소 설정을 마무리합니다.

그게 전부입니다! 프로젝트 구성 요소 설정이 끝났습니다. 큰 부분은 그들이 또한 자유로운 스타일과 함께 온다는 것입니다.

yarn start을 실행하고 번들 빌드를 기다립니다. 브라우저에서 localhost:8080을 가리키면 기능이 없는 앱이 표시됩니다.

다음으로 Flux가 무엇이며 어떻게 사용하여 가상 지갑 응용 프로그램에 기능을 추가 할 수 있는지 살펴 보겠습니다.

플럭스 빌딩 블록

높은 수준에서 Flux는 액션, 디스패처, 상점 및 뷰의 네 가지 주요 부분으로 나뉩니다.

  • 액션은 애플리케이션에서 발생하는 액션을 설명합니다.
  • 디스패처는 콜백의 싱글 톤 레지스트리입니다. 이 기능은 가입 한 모든 상점에 조치를 전달하여 중개인의 역할을 합니다.
  • 스토어은 응용 프로그램의 특정 부분에 대해 상태 및 논리를 업데이트하는 데 필요한 상태 및 논리를 관리합니다.
  • 는 평범한 오래된 반응 구성 요소입니다.

Flux에서는 모든 데이터가 단일 방향으로 흐릅니다.

  • 액션액션 작성자라는 편의 클래스를 사용하여 운영자에게 전달됩니다.
  • 디스패처는 해당 작업을 구독 한 모든 스토어로 보냅니다 (파견 중입니다).
  • 마지막으로, 스토어에서 받은 특정 액션에 관심이 있다면 다시 렌더링 할 수 있도록 상태를 업데이트하고 에 신호를 보냅니다.

아래는 이 프로세스의 시각적 표현입니다.

Representation of how data flows in a Flux application

액션

데이터는 액션이라고하는 일반 JavaScript 객체를 사용하여 단일 방향으로 "와이어를 통해"전송됩니다. 그들의 임무는 응용 프로그램에서 발생한 이벤트를 설명하고 새 데이터를 상점으로 전송하는 것입니다. 각 작업에는 데이터가 들어있는 유형 및 선택적인 페이로드 키가 있어야합니다. 동작은 다음과 유사합니다.

액션 유형은 상수를 정의하는 일반적인 규칙과 유사하게 설명적이고 일관된 대문자 문자열로 표현되어야 합니다. 이 ID는 상점이 조치를 식별하고 그에 따라 응답하는 데 사용하는 고유 한 ID로 사용됩니다.

일반적으로 상수 오브젝트에서 모든 조치 유형을 정의하고 일관성을 유지하기 위해 어플리케이션에서 해당 오브젝트를 참조하는 것이 일반적입니다. 우리의 가상 지갑은 항목을 목록에 추가하는 단일 작업을 지원합니다. 비용과 재정적 이익 모두가 단일 항목으로 취급되므로 상수 파일이 매우 슬림합니다.

js/constants 폴더에 index.js 파일을 만들고 다음 코드를 사용하여 첫 번째 작업 유형을 만듭니다.

액션은 액션 생성자에게 작업을 생성하고 보내는 간단한 작업을 처리하는 작업 작성자라고하는 편리한 클래스 도우미를 사용하여 작업 지정자에게 전달됩니다. 액션 크리에이터를 만들기 전에 먼저 디스패처가 무엇을하는지 살펴보고 플럭스에서의 역할을 이해하십시오.

디스패쳐(발송자)

발송자는 작업 작성자와 상점 간의 의사 소통을 조정하는데 사용됩니다. 이를 사용하여 상점의 조치 핸들러 콜 i을 등록하고 등록 된 상점에 조치를 디스패치 할 수 있습니다.

Dispatcher의 API는 간단하며 사용할 수있는 메소드는 다섯 개뿐입니다.

  • register() : 저장소의 액션 핸들러 콜백을 등록합니다.
  • unregister() : 상점의 콜백 등록을 취소합니다.
  • waitFor() : 지정된 콜백이 먼저 실행될 때까지 대기합니다.
  • dispatch() : 액션을 전달합니다.
  • isDispatching() : 발송자가 현재 작업을 발송하고 있는지 확인합니다.

가장 중요한 것은 대부분의 핵심 기능을 처리하는 데 사용되는 register()dispatch()입니다. 그들이 어떻게 보이고 뒤에서 일하는지 봅시다.

물론 이것은 기본적인 요지입니다. register() 메서드는 모든 콜백을 private _callbacks 배열에 저장하고 dispatch()는받은 작업을 사용하여 저장된 각 콜백을 반복하고 호출합니다.

단순화를 위해 자체 디스패처를 작성하지 않습니다. 대신 Facebook의 라이브러리에서 제공되는 것을 사용합니다. Facebook의 GitHub 레포를 확인하고 구현 방법을 확인하는 것이 좋습니다.

js/dispatcher 폴더에서 index.js라는 새 파일을 만들고 이 코드 조각을 추가합니다.

원사를 사용하여 설치한 flux 라이브러리에서 디스패처를 가져온 다음 새 인스턴스를 내 보냅니다.

운영자가 준비되면 이제 조치로 돌아가서 앱의 액션 생성자를 설정할 수 있습니다. js/actions 폴더에서walletActions.js라는 새 파일을 만들고 다음 코드를 추가합니다.

WalletActions 클래스는 다음 세 가지 기본 작업을 처리하는 addNewItem() 메서드를 노출합니다.

  • item으로 인수를받습니다.
  • 디스패처를 사용하여 앞서 만든 ADD_NEW_ITEM 액션 유형으로 액션을 전달합니다.
  • 그런 다음 수신 된 item을 작업 유형과 함께 페이로드로 보냅니다.

이 액션 크리에이터를 사용하기 전에 점포가 무엇인지, 그리고 Flux 기반 애플리케이션에 어떻게 맞는지 살펴 보겠습니다.

스토어

나는 Flux를 다른 패턴과 비교해서는 안되지만 Flux 상점은 MVC의 모델과 비슷한 방식이라고 말했습니다. 역할은 논리를 처리하고 응용 프로그램의 특정 최상위 구성 요소에 대한 상태를 저장하는 것입니다.

모든 Flux 상점은 조치 핸들러 메소드를 정의한 다음 디스패처에 등록해야합니다. 이 콜백 함수는 주로받은 액션 유형에 대한 switch 문으로 구성됩니다. 특정 동작 유형이 충족되면 그에 따라 작동하고 로컬 상태를 업데이트합니다. 마지막으로 저장소는 업데이트 된 상태에 대한 뷰에 신호를 보내 이벤트를 업데이트하여 적절하게 업데이트 할 수 있도록 합니다.

이벤트를 브로드 캐스트하기 위해 상점은 이벤트 이미 터의 로직을 확장해야합니다. 사용할 수있는 다양한 이벤트 이미 터 라이브러리가 있지만 가장 일반적인 솔루션은 노드의 이벤트 이미 터를 사용하는 것입니다. 가상 지갑과 같은 간단한 응용 프로그램의 경우 하나 이상의 스토어가 필요하지 않습니다.

js/stores 폴더에서 walletStore.js라는 새 파일을 만들고 앱 스토어에 다음 코드를 추가합니다.

노드의 이벤트 이미 터부터 시작하여 Dispatcher와 ActionTypes에 이르기까지 저장소에 필요한 필수 종속성을 가져 오는 것으로 시작합니다. 그 밑에는 이전에 배운 액션 유형과 비슷한 일정한 CHANGE 사항이 있습니다.

사실 하나가 아니기 때문에 혼동해서도 안됩니다. 상점의 데이터가 변경 될 때 이벤트 트리거에 사용되는 상수입니다. 이 파일은 응용 프로그램의 다른 부분에서 사용되는 값이 아니므로 이 파일에 유지합니다.

초기화되면 WalletStore 클래스는 _registerToAction() 콜백을 디스패처에 등록하여 시작합니다. 배후에서 디스패처의 _callbacks 배열에이 콜백이 추가됩니다.

이 메소드에는 액션이 전달 될 때 Dispatcher에서 받은 액션 유형에 대한 단일 switch 문이 있습니다. ADD_NEW_ITEM 동작 유형을 충족하면 _addNewItem() 메서드를 실행하고받은 페이로드를 전달합니다.

_addNewItem() 함수는 항목에 대한 ID를 설정하고 기존 항목 목록에 푸시 한 다음 CHANGE 이벤트를 내 보냅니다. 다음으로 getAllItems()getTotalBudget() 메소드는 기본 getter이며 현재 상점의 상태와 총 예산을 검색하는데 사용합니다.

마지막 두 메서드 인 addChangeListener()removeChangeListener()가 React 구성 요소를 WalletStore에 연결하여 저장소의 데이터가 변경 될 때 알림을 받도록합니다.

컨트롤러 뷰

React를 사용하면 응용 프로그램의 여러 부분을 다양한 구성 요소로 분해 할 수 있습니다. 우리는 그것들을 중첩하여 우리 페이지에서 작동하는 요소를 형성하는 흥미로운 계층을 만들 수 있습니다.

Flux에서 체인 상단에있는 구성 요소는 동작을 생성하고 새 데이터를 수신하는 데 필요한 대부분의 논리를 저장하는 경향이 있습니다. 따라서 이를 제어기보기라고 합니다. 이러한보기는 상점에 직접 연결되며 상점 갱신시 트리거되는 변경 이벤트를 인식합니다.

이 경우 컨트롤러 뷰는 setState 메서드를 호출하여 render() 메서드를 실행하고 뷰를 업데이트하고 소품을 통해 자식 구성 요소로 데이터를 보냅니다. 거기에서 React와 Virtual DOM은 마술을 수행하고 가능한 한 효율적으로 DOM을 업데이트합니다.

우리의 애플 리케이션은 충분히 간단하고 책에 의해 이 규칙을 존중하지 않습니다. 그러나 복잡성에 따라 큰 응용 프로그램에서는 응용 프로그램의 주요 부분에 하위 구성 요소가 중첩된 다중 컨트롤러 보기가 필요할 수 있습니다.

다같이 피팅하기

Flux의 주요 부분은 끝났지만 가상 지갑 앱은 아직 완성되지 않았습니다. 이 마지막 섹션에서는 작업에서 보기까지 전체 흐름을 검토하고 Flux의 단방향 데이터 흐름을 완료하는데 필요한 누락된 코드를 채웁니다.

액션 디스패치

<AddNewItem />구성 요소로 돌아가려면 WalletActions 모듈을 포함시켜 _addNewItem() 메서드에서 새 액션을 생성할 수 있습니다.

이제 양식이 제출되면 조치가 전달되고 모든 상점 (이 경우에는 하나)에 새 데이터가 통지됩니다.

스토어 변경사항 듣기

현재 WalletStore에서 항목이 목록에 추가되면 상태가 변경되고 CHANGE 이벤트가 발생하지만 아무도 듣지 않습니다. <ItemsList />구성 요소 안에 변경 리스너를 추가하여 루프를 닫습니다.

업데이트 된 구성 요소는 Flux의 단방향 데이터 흐름을 닫습니다. 일부 공간을 절약하기 위해 전체 render() 메서드를 포함하여 생략했습니다. 새로운 것을 단계별로 살펴 보겠습니다.

  • WalletStore 모듈이 맨 위에 포함되어 있습니다.
  • 초기 상태는 저장소의 상태를 대신 사용하도록 업데이트됩니다.
  • _onChange() 메서드를 사용하여 저장소의 새 데이터로 상태를 업데이트합니다.
  • React의 라이프 사이클 후크를 사용하면 _onChange() 콜백이 추가되고 저장소의 변경 리스너 콜백으로 제거됩니다.

결론

축하합니다! Flux에서 제공하는 가상의 지갑 응용 프로그램을 작성했습니다. 모든 Flux 구성 요소가 서로 상호 작용하는 방식과 이를 사용하는 React 애플 리케이션에 구조를 추가하는 방법을 배웠습니다.

Flux 기술에 자신감이 있으면 Alt, Delorean, Flummox 또는 Fluxxor와 같은 다른 Flux 구현을 확인하고 어느 것이 당신에게 적합한지 확인하십시오.

아래 의견에 귀하의 생각을 알려주십시오. Flux에 관해 어떻게 생각하는지 알고 싶거나 튜토리얼을 따르는 데 어려움을 겪고 있다면 도움을 받으십시오. 원한다면 Twitter @hiskio에서 나에게 연락 할 수도 있습니다.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.