[2019.08.26] Next.js + Mobx + TypeScript 사용 예시

기존에 있던 Next.js + typescript 프로젝트에서 Mobx를 적용시켜 리펙토링을 해야했다. 

next.js에 mobx를 올리려 하니까, 새롭게 알게된 소소한 부분이 있어서 블로깅으로 남기려고 한다.

 

# Next.js에서 mobx의 Provider 적용

 

기존의 React에서 Provider를 적용하려면, 최상한 index.js에서 <Provider> 태그를 이용하여 <App /> 를 감싸는 방식으로 사용했다.

그러나 next.js에서는 최상단이 Pages폴더가 되는데, 여러개의 페이지가 있어서 어디에 적용해야 될지 모를 수가 있다.

그러나 사실 Pages 폴더 내 파일 중 제일 최상위 파일인 _app.tsx(js)가 따로 있다. 

_app.tsx 파일을 아래와 같이 생성한다.

pages/_app.tsx

import App, { Container } from "next/app";
import React from "react";
import { Provider } from "mobx-react";
import RootStore from "../stores";

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const root = new RootStore();
    return (
      <Provider {...root}>
        <Container>
          <Component {...pageProps} />
        </Container>
      </Provider>
    );
  }
}

return문에, Provider로 root Store(공용 Store)를 Props로 내보내는 것을 확인할 수 있다.

pages 폴더의 어떤 페이지든, 해당 _app.tsx(js)가 더 상위에서 불려지므로, 여기에 공통으로 쓰이는 Header 컴포넌트 등을 사용할 수도 있다.

# 중간, 하위 컴포넌트에서 Store를 가져올 때

store를 가져오기위해선 아래와 같이 정의한다.

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import counterStore from "../stores/counter";

interface Props {
  counter: counterStore;
}

@inject("counter")
@observer
class Counter extends Component<Props, {}> {
  render() {
    const { counter } = this.props;
    return (
      <div>
        {counter.number}
        <button onClick={counter.increase}>+1</button>
      </div>
    );
  }
}

export default Counter;

Mobx를 이용하여 Store를 가져오기 위해서는 inject로 Store를 정의하고, props로 받아오게 된다.

Typescript에서 props를 쓰기 위해서는, 상단에 props에 대한 interface를 정의해야한다.

 

그러나, props의 interface를 정의하게되면, 해당 컴포넌트를 불러올 상단 컴포넌트에서 props를 내려주어야 한다.

 

이럴 땐 해당 컴포넌트의 interface 부분을 아래처럼 물음표를 붙여주면 된다 :)

interface Props {
  counter?: counterStore;
}