react에 뭔진 모르겠지만 mobx가 유명하더라.. 그래서 기본 프로젝트 구성을 만들기 위해 보기 좋은 예제들을 기록한다.
react mobx로 첫 프로젝트를 시작하려면 create-react-app한 뒤 가장 기본적으로 설치해야할 것들이 있다.
1. yarn 설치, https://classic.yarnpkg.com/en/docs/install#debian-stable
2. sudo apt-get update (진행 도중 뭔가 안될때도 수행)
3. react-app-rewired, mobx, react-mobx, react-router-dom, axios 추가 (yarn add)
(검색해보니 eject 보다는 react-app-rewired를 쓰는게 좋을 것 같아서 rewired로 진행했다.)
여러 가지 예제를 하나씩 따라하면서 react를 익혀봤다. 그중 처음 접하기에 최고는 아래 예제였다.
decorator 기초 사용법, store 분리까지 가능하다. 이 글의 다음 포스트인 슈퍼마켓 예제도 정말 좋다.
그러나 Browser 내용이 없고, App.js의 store 전달방법이 마음에 안들어서 내가 만든 App.js를 남긴다.
Broser와 stores는 아래 예시처럼 사용하는게 내 취향이다.
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Provider } from 'mobx-react';
import LoginPage from './pages/LoginPage';
import authStore from './store/authStore';
const stores = { authStore };
function App() {
return (
<Provider {...stores}>
<BrowserRouter>
<main>
<Switch>
<Route path="/login" component={LoginPage}/>
</Switch>
</main>
</BrowserRouter>
</Provider>
)
}
export default App;
여기까지 왔으면 왜 store를 써야되나 하는 생각이 든다. 아래는 내 주관이 많이 들어간 설명이다(걸러보는걸 추천).
store는 페이지, 컨테이너에서 주요하게 사용할 함수들과 데이터를 모아놓는 static class 같은 개념이다.
버튼 클릭 시 호출할 함수정도로, 그 함수는 자신 store 안의 데이터를 get으로 받아오는 수준이다.
여기서, get으로 받아오는 코드를 작성하다보면 store가 더러워지는데, 이를 위해 repository를 사용한다.
repository는 서버 api 호출 시 사용하는 class 같은 개념이다. URL을 모아두고 axios 호출을 담당한다고 보면 된다.
그럼 store는 주요 함수에 repo를 사용해서 간결하게 get으로 데이터를 받아오고, store를 inject 받은 컨테이너는 새로 render하게 된다. 추가로, 딱히 싱글톤을 하지 않을 이유가 없으면 repo 또한 싱글톤으로 만든다.
마지막으로, store에 primitive data만 저장하다보면 변수 개수가 관리하기 힘들정도로 증가하는데, 이 때 constructor, getter, setter를 사용해서 또 간결하게 만들어줄 model이 필요하다. 그래서 model은 함수가 필요없는 데이터셋 정도로 보면 된다.
+ 싱글톤은 export default new XXX();로 만들 수 있다.
느낌이 왔으면 아래 예제를 보고 repository, model을 추가로 구성하면 된다.
woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html
RCA 하자마자 처음부터 이걸 보고 뭔가 하려고해서 너무 힘들었다.
대충 개념이 잡힌 상태로 본다면 정말 좋은 글이다.
'frontend' 카테고리의 다른 글
| react war packaging (0) | 2020.09.10 |
|---|
