React Redux 7 릴리즈

React Redux 7 버전이 릴리즈 되었습니다.
릴리즈 노트를 번역/정리해 보려 합니다.

먼저 React-Redux 7 버전에서는 6 버전에서 오픈되었던 퍼포먼스 이슈 해결등 성능 개선이 있었으며, 후의 7.x 버전에서 제공할 hook API 'useRedux()'를 제공하기 위한 기초 작업을 진행하였습니다.

이번 릴리즈에서 가장 주요한 변화는 'connect'가 내부적으로 Hooks을 사용하도록 구현된 것입니다, 이 때문에 최소 지원 버전이 React 16.8.4 이후 버전으로 요구됩니다.

이번 릴리즈에서 광범위하게 성능 벤치마킹을 하였으며, React-Redux 모든 버전 중 가장 빠른 버전이라 합니다.

변경 사항

기존 6 버전의 public API와 호환되지만, 최소 요구 버전이 React 16.4에서 16.8.4로 변경되었습니다.

connect는 내부적으로 React.memo()를 사용하며 function을 리턴하는 대신 특별한 object를 리턴합니다. function를
반환하는 것을 고려하여 구현된 코드들은 React 16.6 이후로 오류가 생기게 됩니다. PropTypes를
component Type의 유효성을 체크하기 위해 사용 중에 있다면 PropTypes.func에서 PropTypes.elementType으로 변경하여야
합니다.

내부 변화

Component를 직접 subscript 하도록 변경

6 버전에서 각 component들이 store에 subscribe로 store의 state를 React Context API로 읽도록 전환하였지만, Context API는 빈번한 업데이트에 최적화되지 않았고 성능 저하가 있었습니다.

7 버전에서는 직접 읽어오도록 변환하여 성능을 크게 향상했습니다.(이를
통해서 유저에게 직접적인 변화가 일어납니다, React lifecycle의 메서드에서 전달되는 업데이트는 이후 Component 업데이트에 즉각 반영됩니다. 예를 들어 SSR 환경에 마운트 될 때 component dispatching가 포함됩니다.)

Batch 업데이트

React에는 동일한 event loop tick에서 여러 업데이트를 묶어주는 데 사용하는 unstable_batchedUpdates API가 있습니다. 내부
Redux 구독 처리 기능 업데이트에 이 API를 사용하였습니다. 또한 Redux store 업데이트로 인해 발생하는 렌더링 수를 줄여 성능을 향상했습니다.

connect를 Hooks로 재작성

connect warpper를 내부적으로 hooks를 사용하도록 하였습니다.

Public API 변화

Prop으로 store를 반환

연결된 component에 store를 prop으로 전달하는 기능을 다시 가지고 왔습니다. 이 기능은 6 버전에서 내부 구현의 변화로 제거되었던 내용입니다 (component가 store를 직접 구독하지 않기 때문).

Batched React update를 위한 새로운 batch API

React의 unstable_batchedUpdate() API는 event loop tick 내의 어느 React update도 한 번의 render에 이루어지도록 합니다. React는
이미 자체 event handler callback을 위해 내부적으로 사용하고 있으며, 이 API는 실제로 ReactDOM 및 React Native와 같은 렌더러 패키지이며 React 코어는 아닙니다.

React-Redux는 ReactDOM과 React Native 환경 모두에서 동일하게 동작하여야 하기 때문에 빌드할 때 이 API를 렌더러에서 직접 사용합니다. 또 이 함수를 공개적으로 다시 내보내 batch()로 이름을 변경하였습니다. 이 메서드를 사용하려면 React 이외의 여러 액션이 단일 렌더 업데이트로만 생성되도록 할 수 있습니다.

예제

import { batch } from "react-redux";

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

감사합니다.