환경 구축에 앞서

MobX의 기능 중 하나인 데코레이터(@)를 이용해서 적용하는 코드는 create-react-app 에서 공식적으로 지원하는 메서드가 아니에요.
그래서 이를 지원하게 하려면 babel 설정을 만져야 하는데, babel 설정을 만지려면 두가지 방법이 있습니다. 첫번째는 지독한 yarn eject, 두번째는 customize-cra와 react-app-rewired패키지를 이용하는 방법이 있어요.

저는 후자를 선택했습니다.

일단 첫번째로, 의존성 관리가 매우 매우 어렵다는 것입니다. yarn eject를 하고 Dependency 를 설치하면, 다른 패키지와의 의존성을 신경써야 패키지들끼리 충돌이 나지 않아요.
두번째로, 저희가 원하는 순기능이기도 하고, 역기능이 될 수도 있는, babel, webpack 설정을 바꿀 수 있는 기능입니다. 이도 마찬가지로 굉장히 복잡하므로, 필요한 설정만 수정하는 것이 아니면 저 뿐만 아니라 여러분의 생산성을 떨어뜨릴 것이 분명하기 때문이지요.

주의!

customize-cra와 react-app-rewired패키지를 이용한다고 해도 create-react-app 에서 기본적으로 지원되던 모든 기능이 정상적으로 동작하지 않을 수 있습니다.
하지만 yarn eject와는 다르게 되돌아갈 수 있으므로, 항상 그 부분을 염두에 두고 코드를 작성하세요.

환경 구축

데코레이터(@) 관련 환경 구축

앞서 말했듯, babel 설정을 만져줘야 하기 때문에, 해당 설정부터 먼저 만져주도록 해요.

yarn 사용자께서는 yarn 을 사용하시고, npm 사용자는 npm 을 사용하시면 됩니다. 두 스크립트를 둘 다 실행해야하는것은 아니에요.

React - eject 없이 Mobx 데코레이터 사용하기를 참고했어요.

1. 패키지를 설치해요.

2. package.json의 scripts를 수정해요.

package.json에 있는 scripts 중, eject에 있는 것을 제외한 모든 react-scripts 를 react-app-rewired 로 교체해요. 따로 설정해 놓으신 스크립트가 있으셔도 react-scripts 만 교체하시면 됩니다.

3. package.json에 babel 세팅을 추가해요

기존에 다른 세팅이 있으셨던 분은 현재 작성된 코드와 적절히 병합하시면 됩니다!

4. 프로젝트 파일 루트 폴더에 config-overrides.js를 추가해요.

5. tsconfig.json (혹은 jsconfig.json)에서 컴파일 옵션을 추가해요.

기존에 config 파일을 만들어두지 않으셨다면 프로젝트의 루트 디렉토리에 본인에게 맞는 config (Typescript 를 사용하고 계신다면 tsconfig.json, Javascript 를 사용하고 계신다면 jsconfig.json 이겠죠?) 를 생성하시면 됩니다.

그리고 위와 같이 experimentalDecorators 를 true 로 설정해주시면 lint 상에서 오류가 발생하지 않아요.

MobX를 React 에 적용하기

MobX는 애초에 React에서 사용하기 위해 제작되었기 때문에 React에 적용하기가 굉장히 간편해요. 모듈 몇 개만 설치하고, 적용하면 끝! 타입스크립트도 신경 쓸 필요가 없습니다!

1. 패키지를 설치해요.

2. MobX 의 Store 를 저장할 stores를 생성해요

먼저, src 아래에 /stores 폴더를 생성한 뒤, 당신만의 스토어 파일을 생성해요.

저는 YourStore로 해볼게요.
참, 저는 타입스크립트를 사용하였습니다만 자바스크립트의 경우에도 코드가 거의 동일합니다.

코드를 작성해요.

YourStore.ts

위에서 볼 것은 두가지 인데요.

첫번째로 @observable 입니다. 이는 React 의 state 와 비슷한 역할을 하는데요. MobX상에서 변수의 역할을 하신다고 보면 됩니다. 따라서 MobX에서 변수를 선언하실 때에는 일반적인 var let const와 같은 키워드가 아닌, @observable 로 선언하셔야 합니다.

두번째로, @action 인데요. 이는 값을 변경해 줄 수 있는 메서드, 즉 React 에서의 setState 의 역할을 하신다고 보면 됩니다. 하지만 기존의 setState 와는 다르게 함수를 커스터마이징 할 수 있는데요. 예제코드처럼 changeToWorld를 호출하게 되면 yourStore 는 World 라는 값으로 바뀌게 됩니다. 이를 활용해서 여러분들만의 코드를 제작하실 수 있어요. 추후 에피소드에서 이와 관련된 Side-effects 에 관해서 다룰거에요.

3. 최상단 컴포넌트 (index.tsx) 에서 Provider 를 설정해줍니다.

4. 하위 컴포넌트에서 props 에 inject 시켜줍니다.

여기서 두 가지의 새로운 데코레이터 문법이 있는데요.
@inject 는 3번처럼 최상단 컴포넌트에서 Provider를 설정할 때 props로 준 store를 불러옵니다. 만약 Provider 에 props 로 a라는 props를 전달해 주었으면, @inject('a');로 불러와야 합니다. inject 를 하게 되면 a라는 props가 전달이 되며, a 안의 observable value 나 action을 불러와서 사용할 수 있습니다.

@observer는 해당 클래스를 watch (감시) 하여 값이 바뀌게 되면 this.forceUpdate() 를 트리거 해주겠다는 것입니다.

정상적으로 바뀌는군요!

정리

이제 MobX 를 통해 여러분의 코드를 훨씬 생산적으로 제작할 수 있습니다. 즐코딩!

Github 링크 에서 실제 적용된 코드 (타입스크립트)를 확인하실 수 있습니다.

profile
Dreaming All-rounder Developer

0개의 댓글