11
4월
2019

React component updates in 2019.04

React와 함께 주로 사용되는 컴포넌트의 메이저 버전업이 2건 있었습니다.

상태관리를 위한 Redux를 React와 연결해주는 react-redux, 그리고 여러 화면으로 구성되어있는 single-page application 을 만들 경우 필수적으로 사용하게 되는 react-router 입니다.

두 컴포넌트 모두 react 프로그래밍에 있어 필수적으로 사용되는데, 다행히도 둘 다 이전의 메이저 버전과 호환됩니다. 주로 퍼포먼스 개선과 일부 편의성이 개선되었기 때문에, 주의사항만 참고한다면 별다른 migration 없이 package.json 에서 version-up 하면 됩니다.


react-redux v7.0.1

버전 6에서 리포트되었던 속도 이슈를 개선하였습니다. 내부적으로는 connect() 함수에서 react 16.8에 추가되었던 Hooks를 사용합니다.

대부분 내부적 개선이 이루어졌고 기존 version 6의 public API와 호환되기 때문에 코드의 변경은 없습니다. 다만 다음과 같은 내용은 유의해야 합니다.

1. React 최소 버전의 변경

내부적으로 React Hooks를 사용하기 때문에 react의 최소 버전은 16.4에서 16.8.4 로 변경되었습니다. react-redux 7을 사용하려면 react v16.8.4를 사용하거나 16.8.4로 업그레이드 해야합니다.

"dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-redux": "^7.0.1",
}

2. connect()가 반환하는 type이 변경됨

connect()는 내부적으로 React.memo() 를 활용하여 function 대신 특별한 object를 반환합니다. 따라서 PropTypes로 유효성을 체크하고 있었다면 PropTypes.func에서 PropType.elementType으로 변경해야 합니다. 하지만 PropTypes.func를 사용한다고 해서 warning이 발생하지는 않았습니다.

class App extends React.Component {
  static propTypes = {
    someStore: PropTypes.elementType.isRequired,
  };
}

3. Batch API 추가

React에는 동일한 event loop tick에서 여러 업데이트를 묶을 수 있는 unstable_batchedUpdates API 가 있습니다. react-redux는 이 API를 내부적인 redux 구독 처리 기능에 사용했는데, redux store update로 인한 렌더링 수를 줄여서 퍼포먼스 개선 효과가 있었다고 합니다.

이 API는 react-core가 아닌 react-dom 또는 react-native 등의 렌더러 패키지에 있는데, react-redux에서는 이 함수를 공개적으로 batch()라는 이름으로 내보냈습니다. 그래서, 이 함수를 사용하여 여러 action을 단일 렌더링이 일어날 수 있도록 개선할 수 있습니다.

import { batch } from "react-redux";

function myThunk() {
    return (dispatch, getState) => {
        // 한번에 하나의 결합된 re-render가 발생한다.
        batch(() => {
            dispatch(increment());
            dispatch(increment());
        })
    }
}

Release Notes : https://github.com/reduxjs/react-redux/releases/tag/v7.0.1


react-router v5.0

이미 version 4를 사용하고 있다면 코드의 변경 없이 바로 업데이트할 수 있습니다. 원래 4.4로 발표될 예정이었으나 beta test 중 예기치 않은 문제가 발생하여 새롭게 5.0으로 릴리즈되었습니다. react-router 5.0에서는 내부적으로 React 16에 대한 지원이 강화되고 새로운 기능이 몇가지 추가되었습니다.

1. main bundle에서 필요한 컴포넌트만 로딩

개별 파일을 import 하는 대신에 main bundle에서 필요한 컴포넌트를 로딩할 수 있도록 변경되었습니다.

// Instead of:
import Router from 'react-router/Router';
import Switch from 'react-router/Switch';

// do:
import { Router, Switch } from 'react-router';

2. <Route path>에 배열을 사용할 수 있음

하나의 컴포넌트에 2개의 다른 route를 지정하고자 할 때 배열을 사용하여 다음과 같이 변경할 수 있습니다.

// Instead of this:
<Switch>
  <Route path="/users/:id" component={User} />
  <Route path="/profile/:id" component={User} />
</Switch>

// you can now do this:
<Route path={["/users/:id", "/profile/:id"]} component={User} />

Reference : https://reacttraining.com/blog/react-router-v5/

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: