React의 useState와 사용감속기 비교: 올바른 상태 관리 훅 선택하기

웹 개발자로 취업하려는 개인은 해당 분야에서 널리 활용되고 후크 적용을 포함하여 흥미로운 기능 세트를 제공하는 React JavaScript 라이브러리에 대한 숙련도를 습득함으로써 직위를 확보 할 가능성을 높일 수 있습니다.

“후크”라는 이름의 자바스크립트 함수를 활용하면 React 애플리케이션 내에서 논리 연산을 분리하고 재사용할 수 있습니다. 상태 관리 전용의 두 가지 기본 후크, 즉 ‘useState 후크’와 ‘useReducer 후크’가 존재합니다.

사용 상태 훅 개요

 const [state, setState] = useState(initialStateValue);
 

앞서 언급한 코드 블록은 자바스크립트 애플리케이션 내 상태 변수의 활용과 관련이 있습니다. 상태 변수는 렌더링 간 간헐적인 간격 동안 메모리에 저장된 정보를 저장하는 역할을 합니다. setState 함수는 상태 변수의 상태를 수정하거나 업데이트하는 역할을 담당합니다.

`useState` 훅은 두 개의 요소가 포함된 튜플을 반환하는데, 첫 번째 요소는 상태 변수의 현재 상태이고 두 번째 요소는 이를 수정하는 업데이트 함수를 나타냅니다. 또한 선언할 때 상태 변수에 대한 초기 값을 제공해야 합니다.

사용자의 연대순 연도를 나타내는 “나이”로 표시되는 상태 변수의 사양은 17 값으로 초기화되어 다음과 같이 표현할 수 있습니다.

 const [userAge, setUserAge] = useState(17);
 

setUserAge 함수는 userAge 상태 변수를 업데이트하는 작업을 수행합니다.

 setUserAge(19);
 

상태를 수정하면 항상 관련 컴포넌트가 다시 렌더링되며, 상태 변수를 잘못 업데이트하면 무한 루프가 발생하여 프로그램의 무결성이 손상될 수 있다는 점에 유의하시기 바랍니다.

React에서 상태를 직접 수정하면 이후 컴포넌트를 렌더링하는 동안 변경 사항이 보존되지 않을 수 있으므로 직접 수정하지 않는 것이 좋습니다.

 userAge = 19;
 

컴포넌트의 각 인스턴스는 컴포넌트 자체의 정의에 국한되고 동일한 컴포넌트의 다른 인스턴스와 공유되지 않기 때문에 고유한 상태를 갖습니다.

 function App(){
    return (
        <div>
            <Switch />
            <Switch />
        </div>
    )
}
 

앞서 언급한 코드 블록에는 두 개의 Switch 컴포넌트가 포함되지만, 이 두 컴포넌트는 개별 상태를 독립적으로 관리하며 한 컴포넌트가 다른 컴포넌트와 상태를 공유하지 않는 한 서로 상호 의존하지 않습니다.

React에서 state를 업데이트하는 메커니즘은 UI에 실제로 반영하기 전에 변경 사항을 단일 배치로 누적하는 것을 포함합니다. 따라서 상태 변수의 세터 함수가 호출될 때마다 해당 변경 사항은 후속 렌더링 프로세스까지 지연됩니다.

사용리듀서 Hook 개요

React에서 사용리듀서 Hook을 사용하면 여러 개의 상호 연관된 상태를 동시에 관리할 수 있으며, 다음 표기법은 그 구현의 예입니다:

 const [state, dispatch] = useReducer(reducer, initialState)
 

전자가 페이로드를 관리하고 상태를 수정하는 리듀서 함수에 액션을 전달하는 상태 변수와 디스패치 함수를 가지고 있는 사용State와 달리, 사용리듀서는 받은 액션에 따라 상태를 업데이트하는 액션 핸들러와 통신하는 상태 변수와 디스패치 함수를 사용하여 다른 패턴의 상태 관리 방식을 사용합니다.

카운트 재설정, 카운트 값 증가, 카운트 값 감소 버튼으로 구성된 기본 카운트다운 애플리케이션을 구성하는 가상의 시나리오를 생각해 보겠습니다. 사용 상태` 훅을 활용하면 해당 코드는 다음과 유사합니다:

 function Counter(){

    const [count, setCount] = useState(0);

    return(
        <div>
            The count is: {count}
            <div>
                <button onClick={() => setCount(count + 1)}>Increase count</button>
                <button onClick={() => setCount(0)}>Reset</button>
                <button onClick={() => setCount(count - 1)}>Decrease Count</button>
            </div>
        </div>
    )
}
 

앞서 설명한 구현이 효율적으로 작동하지만, 사용감소자 훅을 활용하여 구현할 수도 있습니다.

위의 문장은 useReducer 훅의 기능을 설명하는 예시입니다. 그러나 복잡성이 발생하는 실제 애플리케이션에서는 과도한 것으로 간주될 수 있으며 보다 간소화된 솔루션이 필요할 수 있습니다.

감속기를 사용하면 연결된 상태의 관리와 파견된 작업 항목에 포함된 유형과 관련된 복잡한 추론이 그 성격에 따라 용이해집니다.

디스패치 함수는 다음 패턴과 유사한 동작 객체를 전송할 수 있습니다:

 {type:"action_type", payload:state * 2}
 

 import {useReducer} from "react";

function reducer(state, { type, payload }) {
  if (type === 'countIncrease') {
    return payload;
  } else if (type === 'countDecrease') {
    return payload;
  } else if (type === 'countReset') {
    return payload;
  } else {
    return state;
  }
}
 

감속기 함수를 설정한 후, useReducer 훅을 활용하여 카운터 컴포넌트를 통합할 수 있습니다.

 function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      The count is: {count}
      <div>
        <button onClick={() => dispatch({ type: 'countIncrease', payload: count + 1 })}>
          Increase count
        </button>
        <button onClick={() => dispatch({ type: 'countReset', payload: 0 })}>
          Reset count
        </button>
        <button onClick={() => dispatch({ type: 'countDecrease', payload: count - 1 })}>
          Increase count
        </button>
      </div>
    </div>
  );
}
 

앞서 언급한 코드 블록은 버튼 형태의 사용자 인터페이스 요소 구현을 보여줍니다. 이 컴포넌트의 주요 기능은 카운트 변수에 대해 1씩 증가된 값을 포함하는 데이터 패키지와 함께 “countIncrement” 클래스의 인스트럭션을 전송하는 연산을 시작하는 것입니다. 이 조작의 목적은 해당 카운트 값을 증가시켜 애플리케이션의 상태를 업데이트하는 것입니다.

두 번째 버튼은 null 값의 데이터 패킷과 함께 “countReset” 종류의 작업을 수행하여 카운트 수를 효과적으로 0으로 재설정하도록 구성됩니다.

세 번째 버튼은 “카운트 – 1” 값이 포함된 데이터 패킷과 함께 “카운트 감소” 연산을 시작하여 “카운트” 통계에서 한 단위가 감소하도록 프로그래밍되어 있습니다.

사용 상태와 사용 감속기 후크 중 선택하기

사용 상태와 사용 감속기 후크 활용의 뉘앙스를 잘 이해하면 적절한 사용 시기를 식별하는 것이 필수적입니다.

상태의 필요성이 복잡한 추론을 수반하지 않는다면 Reducer를 사용하는 것이 과도한 것으로 판명될 수 있음이 분명합니다.

관리되는 상태가 숫자, 문자열 또는 부울 값과 같은 자바스크립트 프리미티브가 아닌 경우 `useState` 훅을 활용하는 것이 좋습니다. 또한 객체나 배열 형태의 보다 복잡한 상태의 경우 `useReducer` 함수를 대신 사용하는 것이 유리할 수 있습니다.

애플리케이션의 복잡성이 증가함에 따라 useState 및 useReducer 훅만으로 상태를 관리하는 것이 어려울 수 있습니다.

단일 컴포넌트의 범위를 넘어서는 상태 변경을 쉽게 관리하기 위해 Redux, Jotai 또는 Zustand와 같은 외부 라이브러리를 사용할 수 있습니다.

자바스크립트 라이브러리로 더 쉽게 상태 관리하기

React, Vue, Svelte와 같은 라이브러리는 상태 관리에 대한 각기 다른 접근 방식을 가지고 있습니다. 일반 자바스크립트를 사용하여 상태 관리를 처리할 수도 있지만, 잘 정립된 자바스크립트 라이브러리를 활용하는 것이 더 간단하고 실용적입니다.

Redux를 활용하면 해당 애플리케이션 내에서 여러 컴포넌트를 효과적으로 관리할 수 있기 때문에 React로 구현된 다면적인 애플리케이션을 구성할 때 이상적인 솔루션이 될 수 있습니다.