분류 Reactjs

React Hooks가 Redux를 대체합니까? (1)

컨텐츠 정보

  • 조회 280 (작성일 )

본문

React hooks API가 도입 된 이후 React 후크가 Redux를 대체 할 것인지에 대한 많은 질문이 제기되었습니다.


내 생각에 후크와 Redux 사이에는 겹치는 부분이 거의 없습니다. 후크는 우리에게 마법의 새로운 상태 기능을 제공하지 않았습니다. 

대신 React로 이미 할 수 있는 일을 위해 API를 향상 시켰습니다. 그러나 후크 API는 기본 React 상태 API를 훨씬 더 유용하게 만들었으며 대체하는 클래스 모델보다 쉬우므로 구성 요소 상태를 필요할 때보다 많이 사용합니다.


https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672 


이것이 의미하는 바를 이해하려면 먼저 Redux를 고려해야 하는 이유를 더 잘 이해해야 합니다.


Redux 란 무엇입니까? 


Redux는 React와 쉽게 통합되는 예측 가능한 상태 관리 라이브러리 및 아키텍처입니다.


Redux의 주요 판매 포인트는 다음과 같습니다.

  • 결정적 상태 확인 (순수한 구성 요소와 결합 할 때 결정적 뷰 렌더링 사용)
  • 거래 상태.
  • I / O 및 부작용으로부터 상태 관리를 분리합니다.
  • 응용 프로그램 상태에 대한 단일 진실 소스.
  • 다른 구성 요소간에 상태를 쉽게 공유 할 수 있습니다.
  • 트랜잭션 원격 분석 (자동 로깅 작업 개체)
  • 시간 여행 디버깅.

다시 말해, Redux는 코드 구성 및 디버깅 기능을 제공합니다. 유지 관리하기 쉬운 코드를 작성하는 것이 더 쉬워지고 문제가 발생했을 때 근본 원인을 훨씬 쉽게 추적 할 수 있습니다.


React Hooks 란 무엇입니까? 


React 후크를 사용하면 클래스 및 반응 구성 요소 수명주기 메소드를 사용하지 않고도 상태 및 반응주기 기능을 사용할 수 있습니다. 그것들은 React 16.8에서 소개되었습니다.


React 후크의 주요 판매 포인트는 다음과 같습니다.

  • 상태를 사용하고 클래스를 사용하지 않고 구성 요소 수명주기에 연결하십시오.
  • 다양한 수명주기 방법으로 나누지 않고 구성 요소의 한 곳에 관련 로직을 배치하십시오.
  • 컴포넌트 구현과 무관하게 재사용 가능한 동작을 공유합니다 (렌더 소품 패턴과 같은).

이 환상적인 혜택이 Redux의 혜택과 실제로 중복되는 것은 아닙니다. 결정적 상태 업데이트를 얻기 위해 React 후크를 사용할 수 있고 사용해야 하지만, 이는 항상 React의 기능이었으며 Redux의 결정적 상태 모델은 잘 연결되어 있습니다. 이것이 React가 결정론적 뷰 렌더링을 제공하는 방법이며, 말 그대로 React를 만드는 동기 부여 동기 중 하나입니다.


react-redux hooks API 및 React의 useReducer hook과 같은 도구를 사용하면 하나를 선택할 필요가 없습니다. 둘 다 사용하십시오. 믹스 앤 매치.


후크는 무엇을 대체합니까? 


후크 API가 도입되었으므로 다음과 같이 사용을 중단했습니다.

  • 클래스 구성 요소.
  • 렌더 rop 패턴.

후크가 대체하지 않는 것은 무엇입니까? 


나는 아직도 자주 사용합니다 :

  • 위에 나열된 모든 이유로 Redux.
  • Redux 공급자, 공통 레이아웃 공급자, 구성 공급자, 인증 / 권한 부여, i18n 등과 같은 모든 또는 대부분의 응용 프로그램 보기에서 공유하는 교차 절단 문제를 구성하는 상위 구성 요소
  • 컨테이너와 디스플레이 구성 요소를 분리하여 모듈화, 테스트 가능성을 높이고 효과와 순수한 로직을 쉽게 분리 할 수 ​​있습니다.

후크 사용시기 


모든 앱 또는 모든 구성 요소에 대해 항상 Redux가 필요하지는 않습니다. 앱이 단일 보기로 구성되어 있고 저장 또는 로드 상태가 아니며 비동기 I / O가 없는 경우 Redux의 복잡성을 추가 할만한 이유를 생각할 수 없습니다.


마찬가지로 구성 요소가 다음과 같은 경우 :

  • 네트워크를 사용하지 않습니다.
  • 상태를 저장하거나 로드 하지 않습니다.
  • 자식이 아닌 다른 구성 요소와 상태를 공유하지 않습니다.
  • 임시 로컬 구성 요소 상태가 필요합니다.

React의 내장 구성 요소 상태 모델에 대한 사용 사례가 있을 수 있습니다. 이 경우 React hooks는 잘 작동합니다. 예를 들어 다음 양식은 React의 로컬 구성 요소 상태 useState 후크를 사용합니다.


import React, { useState } from 'react';
import t from 'prop-types';
import TextField, { Input } from '@material/react-text-field';
const noop = () => {};const Holder = ({
itemPrice = 175,
name = '',
email = '',
id = '',
removeHolder = noop,
showRemoveButton = false,
}) => {
const [nameInput, setName] = useState(name);
const [emailInput, setEmail] = useState(email);
const setter = set => e => {
const { target } = e;
const { value } = target;
set(value);
};
return (
<div className="row">
<div className="holder">
<div className="holder-name">
<TextField label="Name">
<Input value={nameInput} onChange={setter(setName)} required />
</TextField>
</div>
<div className="holder-email">
<TextField label="Email">
<Input
value={emailInput}
onChange={setter(setEmail)}
type="email"
required
/>
</TextField>
</div>
{showRemoveButton && (
<button
className="remove-holder"
aria-label="Remove membership"
onClick={e => {
e.preventDefault();
removeHolder(id);
}}
>
&times;
</button>
)}
</div>
<div className="line-item-price">${itemPrice}</div>
<style jsx>{cssHere}</style>
</div>
);
};
Holder.propTypes = {
name: t.string,
email: t.string,
itemPrice: t.number,
id: t.string,
removeHolder: t.func,
showRemoveButton: t.bool,
};
export default Holder;


이 코드는 useState를 사용하여 이름 및 이메일에 대한 임시 양식 입력 상태를 추적합니다.


const [nameInput, setName] = useState(name);
const [emailInput, setEmail] = useState(email); 


또한 Redux에서 소품으로 removeHolder 액션 제작자가 들어오고 있음을 알 수 있습니다. 섞어서 어울리는 것이 좋습니다.


이런 식으로 로컬 구성 요소 상태를 사용하는 것이 항상 좋았지 만 React 후크 이전에는 Redux에 넣고 어쨌든 소품에서 상태를 가져 오는 유혹을 받았을 것입니다.


구성 요소 상태를 사용한다는 것은 클래스 구성 요소를 사용하고 클래스 인스턴스 속성 구문 (또는 생성자 함수)을 사용하여 초기 상태를 설정하는 등의 의미였을 것입니다. Redux를 사용하여 양식 상태를 관리 할 수 있는 플러그 앤 플레이 도구가 도움이 되었기 때문에 비즈니스 로직에 임시 양식 상태가 유출되는 것에 대해 걱정할 필요가 없었습니다.


사소한 모든 앱에서 이미 Redux를 사용하고 있었기 때문에 선택은 간단했습니다. Redux (거의) 모든 것!


이제 선택은 여전히 ​​간단합니다.


구성 요소 상태의 구성 요소 상태, 응용 프로그램 상태의 Redux. 


Redux를 사용하는 경우 


또 다른 일반적인 질문은“모든 것을 Redux에 넣어야 합니까? 그렇지 않으면 시간 여행 디버깅이 중단되지 않습니까?” 


애플리케이션에 로깅 상태 측정 또는 시간 여행 디버깅과 같은 유용한 정보를 제공하기에는 임시적이고 너무 세분화 된 애플리케이션에 많은 상태가 있기 때문입니다. 실시간 공동 작업 편집기를 작성하지 않는 한 모든 사용자 키 입력 또는 마우스 움직임을 Redux 상태로 전환 할 필요는 없습니다. Redux 상태에 항목을 추가 할 때 추상화 계층과 복잡성을 추가합니다.


다시 말해, Redux를 자유롭게 사용할 수 있지만 사용하면 그 이유가 있어야 합니다.


Redux는 다음과 같은 경우에 유용합니다.

  • 네트워크 또는 장치 API와 같은 I / O를 사용합니다.
  • 상태를 저장하거나 로드합니다.
  • 자식이 아닌 구성 요소와 상태를 공유합니다.
  • 응용 프로그램의 다른 부분과 공유되는 모든 비즈니스 논리 또는 데이터 처리를 처리합니다.