React-Redux & Redux toolkit(번역)

이해용·2022년 11월 30일

Getting Started 번역

React-Redux

React Redux 는 Redux 의 공식 React UI 바인딩 레이어입니다 . 이를 통해 React 구성 요소는 Redux 스토어에서 데이터를 읽고 상태를 업데이트하기 위해 스토어에 조치를 발송할 수 있습니다.

API Overview

Provider: React Redux는 앱의 나머지 부분에서 Redux store를 사용할 수 있도록 하는 component 를 포함합니다.
Hooks: React Redux는 React 구성 요소가 Redux 스토어와 상호 작용할 수 있도록 하는 한 쌍의 사용자 지정 React Hook을 제공합니다.
useSelector는 스토어 상태에서 값을 읽고 업데이트를 구독하는 반면 useDispatch는 스토어의 dispatch 메서드를 반환하여 액션을 디스패치할 수 있도록 합니다.
useSelector: 어떤 state 값을 사용하고 싶은지 선택합니다.
useDispatch: state값을 변경시킬 때 사용합니다.

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
} from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(selectCount)
  const dispatch = useDispatch()

  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span className={styles.value}>{count}</span>
        <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
      </div>
      {/* omit additional rendering output here */}
    </div>
  )
}

Why Use React Redux?

Redux 자체는 React, Angular, Vue, Ember 및 Vanilla JS를 포함한 모든 UI 레이어 또는 프레임워크와 함께 사용할 수 있는 독립 실행형 라이브러리입니다. Redux와 React는 일반적으로 함께 사용되지만 서로 독립적입니다.

모든 종류의 UI 프레임워크와 함께 Redux를 사용하는 경우 일반적으로 UI 코드에서 스토어와 직접 상호 작용하는 대신 "UI 바인딩" 라이브러리를 사용하여 Redux를 UI 프레임워크와 함께 연결합니다.

React Redux는 React의 공식 Redux UI 바인딩 라이브러리입니다. Redux와 React를 함께 사용하는 경우 React Redux를 사용하여 이 두 라이브러리를 바인딩해야 합니다.

React Redux를 사용해야 하는 이유를 이해하려면 "UI 바인딩 라이브러리"가 무엇을 하는지 이해하는 것이 도움이 될 수 있습니다.

Integrating Redux with a UI(Redux를 UI와 통합하기)

모든 UI 레이어와 함께 Redux를 사용하려면 동일하고 일관된 단계가 필요합니다.

Redux store 생성
업데이트 구독
subscription callback 내부:
1. 현재 store 상태 가져오기
2. 이 UI 조각에 필요한 데이터 추출
3. 데이터로 UI 업데이트
필요한 경우 초기 상태로 UI 렌더링
Redux 작업을 발송하여 UI 입력에 응답

이 로직을 손으로 작성하는 것이 가능하지만 그렇게 하면 매우 반복적입니다. 또한 UI 성능을 최적화하려면 복잡한 로직이 필요합니다.

store에 구독하고 업데이트된 데이터를 확인하고 re-render를 트리거하는 프로세스를 보다 일반적이고 재사용 가능하게 만들 수 있습니다. React Redux와 같은 UI 바인딩 라이브러리는 store 상호 작용 로직을 처리하므로, 직접 코드를 작성할 필요가 없습니다.

Reasons to Use React Redux

React의 공식 Redux UI 바인딩입니다.

Redux는 모든 UI 레이어와 함께 사용할 수 있지만 원래는 React와 함께 사용하도록 설계 및 의도되었습니다. 다른 많은 프레임워크에 대한 UI 바인딩 레이어가 있지만 React Redux는 Redux 팀에서 직접 유지 관리합니다.

React의 공식 Redux 바인딩인 React Redux는 두 라이브러리의 모든 API 변경 사항을 최신 상태로 유지하여 React 구성 요소가 예상대로 작동하도록 합니다. 의도된 용도는 선언적 구성 요소를 작성하는 React의 디자인 원칙을 채택합니다.

성능 최적화를 구현합니다

React는 일반적으로 빠르지만 기본적으로 구성 요소를 업데이트하면 React가 구성 요소 트리의 해당 부분 내부에 있는 모든 구성 요소를 다시 렌더링하게 됩니다. 여기에는 작업이 필요하며 지정된 구성 요소에 대한 데이터가 변경되지 않은 경우 요청된 UI 출력이 동일하기 때문에 다시 렌더링하는 데 작업이 낭비될 수 있습니다.

성능이 중요한 경우 성능을 개선하는 가장 좋은 방법은 불필요한 리렌더링을 건너뛰어 데이터가 실제로 변경된 경우에만 구성 요소가 다시 렌더링되도록 하는 것입니다. React Redux는 내부적으로 많은 퍼포먼스 최적화를 구현하므로, 당신의 컴포넌트를 실제로 필요할 때만 리렌더링 됩니다.

또한 React 구성 요소 트리에서 여러 구성 요소를 연결하여 연결된 각 구성 요소가 해당 구성 요소에 필요한 저장소 상태의 특정 데이터 조각만 추출하도록 할 수 있습니다. 즉, 대부분의 경우 특정 데이터 조각이 변경되지 않았기 때문에 자신의 구성 요소를 다시 렌더링해야 하는 빈도가 줄어듭니다.

예시코드 보러가기