Moxb 처음 시작해보기(2)

Prerequisites

Mobx처음 시작해보기(1)

Store 사용

Store란 직역하자면 저장소를 뜻한다. 리덕스, 혹은 Flux 아키텍쳐를 사용했었던 유저라면 친숙한 개념일 것이다.

with store

전 블로그 글(Mobx처음 시작해보기(1)) 초반에 언급하였듯이 어플리케이션의 상태 관리를 하나, 혹은 다수의 store에 정보를 저장하고 사용하면 불필요한 컴포넌트간의 props이동을 방지할 수 있다. 이제 간단한 store를 정의하고 사용해보도록 하자. store를 사용하기 위해서는 우리 프로젝트의 전체 구조를 손볼 필요가 있다. 우선 router처리를 위해 react-router-dom, history를 설치해보자.

yarn add react-router-dom
yarn add history

기존에 App.js파일에 login 페이지를 작성하였지만, 이를 Login 페이지를 생성한 후 코드를 이동해야 한다.

src 폴더 -> pages폴더 생성 -> Login.js 파일 생성 -> 코드 이동

src 폴더 -> pages 폴더 -> Login.js

App.js 파일을 수정하기 전에, 먼저 store를 생성해보자. 그 뒤 store를 App.js파일에 적용시켜 보도록 하자.

src 폴더 -> stores폴더 생성 -> index.js 파일 생성 -> testStore.js 파일 생성

먼저 testStore.js 파일을 생성하고, 각 코드를 살펴보도록 하자.

testStores.js -> TestStore store 생성

3 line: store는 기본적으로 class 형태로 작성하게 된다.
4, 7 lines: store에 저장할 데이터를 선언하고, constructor안에서 초기화하고 있다.
Login.js파일에서 유저를 생성하고, userList에 저장할 예정이다.
11 line: Login.js파일에서 유저를 생성하고 store에 저장하도록 도와주는 함수를 생성하였다.

이제 stores 폴더의 index.js 파일에서 생성한 store를 읽어보도록 하자.

index.js

index.js 파일에서 store를 읽어온 이유는, 실제 프로젝트를 진행하다보면 다양한 store를 만들 필요가 많기 때문이다. 하나의 파일에서 각 store를 읽어보고 루트의 App.js 파일에 연결하기 위함이다.
testStore와 TestStore가 왜 어떤것은 대문자로 시작하고, 어떤것은 소문자로 읽어오는지 의아한 분들도 있을 것이다. 이는 store를 선언하는 것은 class인 것을, 이를 실제로 사용하는 어플리케이션은 이를 인스턴스로써 사용한다는 것을 명시하는 것이다. 만약 class와 instance의 개념이 헷갈린다면 모두 대문자로 생성하고 이용해도 무방하다.

이제 App.js 파일을 수정하고 Login.js파일을 import해보자.

App.js

2, 4, 9, 15 lines: router처리를 위해 추가하였다. 
3 line: stores를 우리 App에 적용시키기 위해서는 mobx-react의 Provider 컴포넌트를 사용하면 된다.
14 line: 7 line에서 import한 store들을 전에 App을 감쌈으로써 연결하고 있다. 이 때 '...'구문을 사용하였는데, 다양한 store가 있을 경우 이를 unpacking함으로써 한번에App에 provider할 수 있다.

지금까지 생성한 폴더와 파일의 구조는 다음과 같다.

structure

이제 store를 선언하였고, 우리 App에 연결하였다. 마지막으로 Login.js 파일의 코드를 수정하여 선언한 store의 정보를 이용해보도록 하자.

Login.js with Mobx Store

7 line: mobx-react의 inject를 사용하게 되면, App.js 파일에서 Provider를 통해 연결된 store를 다른 특별한 구문없이 사용할 수 있게 된다. 만약 하나의 컴포넌트에 다양한 store를 사용하고 싶다면, inject("testStore", "testStore2", ...) 처럼 사용하면 된다.
56 line: 연결된 store는 이처럼 this.props.스토어이름 의 방법으로 사용하면 된다. 우리는 testStore에서 addUser함수를 선언하였고, 이를 이용하여 testStore의 userList에 정보를 저장할 수 있게 된다.
36 line: 올바르게 store에 정보가 저장되었는지 확인하기 위한 용도이다. 실제로 input에 임의의 값을 입력해보고 올바르게 출력되는지 확인해보자.

이렇게 간단하게 mobx를 이용한 Login페이지을 구현해보았다.