React 갈고리를 사용하여 상태 관리

작년 초에 React 16.8이 발표되었고 hooks가 추가되었습니다.갈고리의 도입으로 개발자는 class components 에서 사용할 수 있는 React의 많은 유용한 특성 (예를 들어 생명주기 이벤트, 상하문과 상태) 을 이용할 수 있고 function components 에서 사용할 수 있다.
본고에서 우리는 갈고리 관리 기능 구성 요소의 상태를 사용하는 몇 가지 방법을 연구할 것이다.

If you’d like to know more about the How’s and Why’s of using function components with hooks vs. class components, check out React’s Introduction to Hooks

본 강좌에서 구축된 응용 프로그램은 github에서 얻을 수 있다

useState 연결

useState 갈고리를 사용하면 함수 구성 요소에서 상태 변수를 설명할 수 있습니다.React를 통해 클래스 구성 요소의 상태 변수처럼 이 데이터를 다시 렌더링할 때 유지합니다.갈고리를 사용하려면, 우리는 그것을 가져오고 호출하여 초기 값을 전달하기만 하면 된다.
한번 해보자!

useState 선언 상태 변수 사용

우선, points라는 상태 변수를 설명합니다. 우리는 그것을 사용하여 숫자 점 값을 저장할 것입니다. 이 점 값은 점 계수기에서 사용할 것입니다.

import React, { useState } from 'react'
function Points() {
    // Creates a state variable named 'points' whose initial value is 0
   const [points, setPoints] = useState(0)
   // ...

보시다시피 useState() 변수의 초기 값을 가져옵니다.이 경우, 우리는 초기 값을 0으로 설정하지만, 대상, 그룹, 문자열 등을 분배할 수 있습니다. 당신이 어떻게 생각하든지!useState()의 반환값은 두 항목을 포함하는 그룹입니다.첫 번째는 이 상태 변수의 최신 값입니다.두 번째는 이 상태 변수를 업데이트하는 함수입니다.우리는 분해를 사용하여 이 두 항목을 되돌려받는다.

상태 변수 업데이트

현재 우리는 setPoints() 되돌아오는 useState() 을 사용하여 points 상태 변수를 업데이트할 수 있습니다!

// ...
const [points, setPoints] = useState(0)
return (
    <>
       <button onClick={ () => setPoints( points + 1) }>Add</button>
    </>
)
// ...

위의 코드에서 사용자가 Add 단추를 눌렀을 때마다points 상태 변수는 incremented1입니다.

그것들을 한데 모으다

자, 지금 우리는 상태 변수가 하나 있고, 이 변수를 업데이트할 수 있습니다!우리 이 물건들을 함께 두자.다음은 완전한 점 구성 요소입니다.이 경우 구성 요소 setPoints() 의 다른 함수 resetPoints() 에서 호출할 수 있습니다.

import React, { useState } from 'react'
import '../assets/scss/Points.scss'

function Points() {
  // Creates a state variable named 'points' whose initial value is 0
  const [points, setPoints] = useState(0)
  // Function that will reset the point count
  const resetPoints = () => setPoints(0)

  return (
    <div id="Points">
      <p className="title">Points (useState)</p>
      <hr className="divider"/>
      <div className="pointsContainer">
          <div className="buttons">
            {/* These buttons use the setPoints function to update the state variable's value */}
            <button className="button add" onClick={() => setPoints( points + 1 )}>Add</button>
            <button className="button subtract" onClick={() => setPoints( points - 1 )}>Subtract</button>
            <button className="button reset" onClick={resetPoints}>Reset</button>
          </div>
          <div className="outputBox">
            {/* Output the points variable */}
            <p>{ points }</p>
          </div>
      </div>
    </div>
  );
}

export default Points

간단하죠?
갈고리를 사용하면 함수 구성 요소에 상태 변수를 설정하고 업데이트하는 데 성공했습니다.이제 "내 구성 요소에 매우 복잡한 상태가 있고 깊이 박힌 데이터가 있다면 어떻게 해야 합니까? 더 깨끗한 방법으로 상태를 설정할 수 있습니까?"라고 생각할 수 있습니다.
다음 절에서 우리는 이 확실한 문제를 해결하기 위해 useState()의 대체 방안을 연구할 것이다!

useReducer 연결

useReducer 갈고리는 상태를 관리하는 능력을 제공하는데 그 방식은 Redux가 Reducer와 스케줄링 동작을 사용하여 상태를 관리하는 방식과 매우 유사하다.

If you aren’t sure what a reducer is, it is basically a function that updates a state based on an action that gets sent to it. For more detailed information, check out Redux’s documentation on reducers

useReducer를 사용하려면 감속기와 구성 요소의 초기 상태를 전달하기 위해 가져오고 호출해야 합니다.

useReducer를 사용하여 상태 및 감속기 설정

간단한 감속기를 만드는 것부터 시작해서 어떤 조작에 근거하여 상태를 업데이트하는 방법을 정의하고 구성 요소에게 이 감속기를 사용하도록 알려 줍니다.

import React, { useReducer } from 'react'

// The initial state of the component
const initialState = { points: 0 }
// The reducer we are going to use
function reducer( state, action ) {
  switch ( action.type ) {
    case 'add':
      return { points: state.points + 1 };
    default:
      throw new Error();
  }
}

function Points() {
  // Sets up a reducer to handle the state 
  const [state, dispatch] = useReducer( reducer, initialState );
  // ...

위의 코드에서, 우리는 초기 상태를 단일 키 points 를 가진 대상으로 설정했는데, 그 값은 0이다.이 예는 간단하지만 useReducer 주가 더 복잡해지면서 진정으로 빛난다.
갈고리는 reducer 을 첫 번째 매개 변수로 하고 initial state 을 두 번째 매개 변수로 한다.
이 모든 것이 설정되었습니다. 우리는 현재 구성 요소에 사용할 수 있는 감속기가 있습니다. 이 감속기는 동작을 처리하고 다시 렌더링할 때 상태를 유지할 수 있습니다!

useReducer can also take in a third argument, a function that allows you to lazily initialize the state. This can be useful if you would like to calculate the initial state outside of the reducer. Also, because this initialization function is outside of the reducer, it may be used later on to reset the state. See the docs for more info.

감속기로 상태를 업데이트하기 위해 스케줄링 작업

useReducer() 두 항목을 포함하는 그룹을 되돌려줍니다.첫 번째는 상태의 최신 버전이고, 두 번째는 adispatch 함수입니다.이 함수는 Redux와 완전히 동일하게 사용됩니다.

// ***
return (
    <>
          <button onClick={() => dispatch({type: 'add'})}>Add</button>
    </>
);
// ***

단추를 눌렀을 때 dispatch 함수는 add 형식으로 시작되며, 이 유형은 감속기에 포착되어 state.points 1이 증가합니다.

그것들을 한데 모으다

경탄했어이제 우리 이 모든 것을 함께 놓자.다음은 이러한 개념을 사용하는 완전한 구성 요소입니다.

import React, { useReducer } from 'react'
import '../assets/scss/Points.scss'

// The initial state of the component
const initialState = { points: 0 }
// The reducer we are going to use
function reducer( state, action ) {
  switch (action.type) {
    case 'add':
      return { points: state.points + 1 };
    case 'subtract':
      return { points: state.points - 1 };
    case 'reset':
      return { points: 0 }
    default:
      throw new Error();
  }
}

function Points() {
  // Sets up a reducer to handle the state 
  const [state, dispatch] = useReducer( reducer, initialState );

  return (
    <div id="Points">
      <p className="title">Points (useReducer)</p>
      <hr className="divider"/>
      <div className="pointsContainer">
          <div className="buttons">
            {/* These buttons use the dispatch to update the state */}
            <button className="button add" onClick={() => dispatch({type: 'add'})}>Add</button>
            <button className="button subtract" onClick={() => dispatch({type: 'subtract'})}>Subtract</button>
            <button className="button reset" onClick={() => dispatch({type: 'reset'})}>Reset</button>
          </div>
          <div className="outputBox">
            {/* Output the points variable */}
            <p>{ state.points }</p>
          </div>
      </div>
    </div>
  );
}

export default Points

됐어, 이렇게!
감속기를 사용하여 상태를 관리하는 기능 구성 요소.이런 관리 상태의 방법은 useState보다 우수하다. 왜냐하면 useReducer 갈고리의 React’s documentation에서 일부 성능 향상을 언급했기 때문이다.

결론

위의 예에서 알 수 있듯이 React의 갈고리 실현은 유용한 상태 특성을 클래스 구성 요소에서 함수 구성 요소로 가져왔을 뿐만 아니라 매우 쉽게 만들었다!
우리는 함수 구성 요소에서 상태를 유지하는 두 가지 방법을 연구했다.먼저 useState 를 사용하고 useReducer 를 사용합니다.일반적으로 useReducer는 상태에서 비교적 큰 데이터 집합을 처리하는 방법이지만 useState 상태가 비교적 간단한 구성 요소에 매우 유용하다.

The next step to this would be sharing state across multiple function components! In my tutorial Shared State with React Hooks and Context API I cover one of the more popular ways out there to achieve this. Give it a read if you’re interested!

읽어주셔서 감사합니다. 마음에 드셨으면 좋겠습니다.