October 16, 2019

react-router-dom version upgrade error

react-router-dom API 중 Hooks의 useHistroy 를 사용하기 위해 버전 업을 하는 도중에 아래와 같은 에러 메세지가 발생했다.

Invariant failed: You should not use <Redirect> outside a <Router>

React ErrorBoundary 처리시 에러가 발생하면 띄워주는 페이지에서 버튼을 클릭하면 history.goBack() 을 하도록 되어있는데 이부분에서 에러가 발생했다.

원인을 찾지 못하다가 아래 페이지를 참고해서 node_module 폴더와 package-lock.json 파일을 삭제하고 npm install 을 한 뒤 재 시작하니 해당 오류가 해결 되었다. (정확한 원인은 알수 없으나, 설정 오류로 생각하기로 했다.)

참고: Error: Invariant failed: You should not use outside a #3078

mobx V6 migration

현재 mobx 버전은 5.4.x 인데 V6 부터 Hooks을 사용할 수 있다고 해서 버전 업을 하기로 하고 이슈가 있을까 해서 검색해 보니 이슈도 없고 migration도 별다른 어려움이 없어 바로 버전업을 하고 적용을 했다. 현재 프로젝트는 클래스형컴포넌트와 함수형 컴포넌트가 섞여있는 구조라 내가 작업한 부분만 적용을 했다.

store를 모아논 폴더(혹은 Hook을 모아둔 폴더가 있다면 그곳도 상관 없을 듯하다.)에 아래 내용으로 useStores.js 파일을 생성한다.

useStores.js

import React from "react"
import { MobXProviderContext } from "mobx-react"

export function useStores() {
  return React.useContext(MobXProviderContext)
}
import { observer } from "mobx-react"
import { useStores } from "stores/useStores"

const UserInfo = () => {
  const {
    user: { name },
  } = useStores()

  return <div>`name: ${name}`</div>
}

export default observer(UserInfo)

Reference

MobX with React Migration guide mobx-react와 React Hooks API 함께 사용하기