React의 상태 관리: useState, useReducer 및 useRef를 사용해야 하는 경우

상태 관리는 React 애플리케이션 개발의 기본 측면입니다. useState, useReducer 또는 useRef를 언제 사용해야 하는지 이해하면 애플리케이션의 성능과 유지 관리 가능성을 크게 향상시킬 수 있습니다. 이 문서에서는 이러한 각 후크를 살펴보고 적절한 사용 사례에 대한 지침을 제공합니다.

React의 상태 관리 소개

React는 기능 구성요소의 상태 및 기타 부작용을 관리하기 위한 여러 후크를 제공하며, 각각은 고유한 목적을 제공하고 다양한 시나리오에 적합합니다.

1. useState: 단순 상태 전환 관리

useState는 React에서 상태를 관리하기 위한 가장 간단한 후크입니다. 다음 상태가 이전 상태에 의존하지 않는 간단한 상태 전환을 처리하는 데 적합합니다.

• 사용 사례:

  • 로컬 형식 값
  • 전환(예: 표시/숨기기, 활성화/비활성화)
  • 복잡한 로직이나 심층적인 업데이트를 포함하지 않는 기타 간단한 상태

• 예:
  
  

  function ToggleComponent() {
    const [isToggled, setToggle] = useState(false);

    return (
      <button onClick={() => setToggle(!isToggled)}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    );
  }
    ```



## 2. useReducer: Managing Complex State Logic

`useReducer` is more suited for cases where the next state depends on the previous one, or when the state logic is complex, involving multiple sub-values or when the next state depends on multiple previous states.

- **Use Cases**:
  - Complex forms or user inputs
  - States that depend on previous states
  - Handling multiple states tightly coupled together

- **Example**:



```jsx
function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

3. useRef: DOM 노드 액세스 및 변경 가능한 값 저장

useRef는 DOM 노드에 직접 액세스하고 구성 요소의 수명 동안 변경 가능한 값을 유지하는 데 사용됩니다. 단순한 심판 이상의 용도로 유용합니다.

• 사용 사례:

  • 초점, 텍스트 선택 또는 미디어 재생 관리
  • 명령형 애니메이션 트리거
  • 업데이트 시 다시 렌더링되지 않는 변경 가능한 값 저장

• 예:
  
  

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

결론: 상태 관리를 위한 올바른 방법 선택

React에서 올바른 상태 관리 후크를 선택하는 것은 상태의 복잡성과 다른 상태 또는 구성 요소 수명 주기와 상호 작용하는 방식에 따라 달라집니다. useState는 간단한 상태에 적합하고, useReducer는 보다 복잡한 상태 상호작용에 적합하며, useRef는 다시 렌더링하지 않고 참조 및 변경 가능한 데이터를 관리하는 데 적합합니다.

최종 생각

상태 관리를 위해 각 React 후크를 언제, 왜 사용해야 하는지 이해하면 코드가 더 깔끔하고 효율적일 뿐만 아니라 유지 관리 및 디버그도 더 쉬워집니다. React 애플리케이션에서 상태를 관리하는 가장 효과적인 방법을 찾으려면 이러한 후크를 실험해보세요.

위 내용은 React의 상태 관리: useState, useReducer 및 useRef를 사용해야 하는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!