모든 것에 정말로 \'useState\'가 필요합니까? 대안 탐색-JS 튜토리얼-php.cn

모든 것에 정말로 \'useState\'가 필요합니까? 대안 탐색

Susan Sarandon

풀어 주다： 2024-10-09 06:20:02

원래의

756명이 탐색했습니다.

Do You Really Need

처음 React에 뛰어들 때 useState는 모든 것을 작동하게 만드는 마법의 주문처럼 느껴집니다. 클릭수를 추적하는 버튼을 원하시나요? useState를 사용하세요. 모달을 전환해야 합니까? useState를 다시 사용하세요. 하지만 React 개발에 대해 더 깊이 들어가면서 다음과 같은 의문이 들 수 있습니다. useState가 모든 상황에 적합한 선택인가요?

당연히 대답은 '아니요'입니다. useState는 다재다능하지만 React는 특정 요구 사항에 따라 더 잘 맞을 수 있는 다른 후크와 패턴을 제공합니다. useRef, useReducer 및 useContext와 같은 몇 가지 대안을 탐색하여 어떤 점이 빛나는지 살펴보겠습니다.

useState 대신 useRef를 사용해야 하는 경우

React 초보자의 전형적인 실수는 실제로 렌더링에 영향을 주지 않는 값에 useState를 사용하는 것입니다. useRef는 다시 렌더링을 트리거하지 않고 렌더링 전반에 걸쳐 데이터를 유지해야 하는 경우 이상적인 선택입니다.

실제 예:

버튼을 클릭한 횟수를 추적하고 있지만 매번 다시 렌더링하기 위해 구성요소가 필요하지 않다고 상상해 보세요.

function ClickTracker() {
  const clickCount = useRef(0);

  const handleClick = () => {
    clickCount.current += 1;
    console.log(`Button clicked ${clickCount.current} times`);
  };

  return <button onClick={handleClick}>Click me</button>;
}

로그인 후 복사

이 경우 useRef는 불필요한 재렌더링을 유발하지 않고 클릭 수를 유지합니다. useState를 사용한 경우 클릭할 때마다 구성 요소가 다시 렌더링되지만 여기서는 그럴 필요가 없습니다.

언제 사용을 선택해야 하는지참조:

UI 업데이트를 실행할 필요가 없는 추적 값.
DOM 요소 또는 이전 상태 값에 대한 참조를 저장합니다.

useReducer가 useState보다 빛나는 경우

더 복잡한 상태 로직의 경우, 특히 상태에 여러 하위 값이나 작업이 포함된 경우 useReducer가 강력한 대안이 될 수 있습니다. useState는 여러 개의 상호 의존적인 상태를 관리할 때 투박하게 느껴질 수 있습니다.

실제 시나리오:

이름, 이메일, 비밀번호 등 여러 입력 사항을 관리하는 양식을 구축한다고 가정해 보겠습니다. 각 입력에 대해 useState를 사용하는 것은 금방 지루해질 수 있습니다.

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    case 'SET_PASSWORD':
      return { ...state, password: action.payload };
    default:
      return state;
  }
}

function SignupForm() {
  const [formState, dispatch] = useReducer(formReducer, {
    name: '',
    email: '',
    password: ''
  });

  return (
    <>
      <input
        value={formState.name}
        onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
        placeholder="Name"
      />
      <input
        value={formState.email}
        onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })}
        placeholder="Email"
      />
      <input
        value={formState.password}
        onChange={(e) => dispatch({ type: 'SET_PASSWORD', payload: e.target.value })}
        placeholder="Password"
      />
    </>
  );
}

로그인 후 복사

여기서 useReducer는 모든 상태 업데이트를 단일 함수로 중앙 집중화하므로 여러 useState 호출보다 관리가 더 쉽습니다.

useReducer를 선택해야 하는 경우:

여러 하위 값 또는 작업이 포함된 복잡한 상태 로직을 처리합니다.
상태 전환이 명확한 작업 기반 흐름(예: SET, ADD, REMOVE)을 따르는 경우.

대신 useContext에 접근해야 할까요?

상태가 여러 구성요소에서 공유되는 경우 프롭 드릴링은 빠르게 악몽이 될 수 있습니다. 이것이 바로 useContext가 필요한 곳입니다. 이는 props를 여러 수준으로 전달하지 않고도 상태를 공유하는 데 도움이 됩니다.

상황에 따른 예:

장바구니를 만들고 있다고 상상해 보세요. 헤더, 결제 페이지, 장바구니 미리보기 등 앱의 다양한 부분에서 액세스하려면 장바구니 상태(추가된 항목, 총 가격 등)가 필요합니다.

const CartContext = React.createContext();

function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

function Header() {
  const { cart } = React.useContext(CartContext);
  return <div>Items in cart: {cart.length}</div>;
}

function App() {
  return (
    <CartProvider>
      <Header />
      {/* Other components */}
    </CartProvider>
  );
}

로그인 후 복사

이 시나리오에서 useContext는 props를 수동으로 전달하지 않고도 장바구니 상태가 필요한 모든 구성 요소에서 사용할 수 있도록 합니다.

useContext를 선택하는 경우:

깊게 중첩된 구성요소 간 상태 공유.
자주 액세스하는 글로벌 데이터(예: 사용자 인증, 테마)에 대한 속성 드릴링을 방지합니다.

균형 잡힌 접근 방식

useState는 훌륭한 출발점이지만 React 생태계는 코드를 단순화하고 성능을 향상시킬 수 있는 useRef, useReducer 및 useContext와 같은 다른 강력한 도구를 제공합니다. 기본적으로 useState에 도달하는 대신 다음과 같은 몇 가지 주요 질문을 스스로에게 물어보세요.