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

안녕, 세상.👋

갈고리는 React의 특수한 형식의 함수로 React 기능 구성 요소에서 호출할 수 있습니다.그것들은 당신에게 데이터를 저장하고 상호작용을 증가시키며 이른바 부작용을 수행할 수 있다.
다음은 가장 자주 사용하는 연결 고리입니다.

사용상태

사용 효과

사용자 EF

상하문

사용

사용자 교육자

본고에서 우리는 useState갈고리를 깊이 있게 이해할 것이다.

사용 상태

useState은 React의 내장 함수입니다.그것은 하나의 매개 변수를 받아들여서 실행할 때 두 요소로 구성된 그룹을 되돌려줍니다.
우리 예를 하나 봅시다.

const [count, setCount] = useState(0)

은 구성 요소의 상태를 관리하는 데 사용됩니다.

어셈블리의 상태가 변경되면 React는 자동으로 어셈블리와 모든 서브어셈블리를 다시 렌더링합니다.

상태의 초기 값을 매개 변수로 합니다.

은 두 원소의 수조를 되돌려줍니다.

첫 번째 요소는 상태의 값입니다.

두 번째 원소는 하나의 함수로 상태

의 값을 설정할 수 있다

이 요소들을 마음대로 명명할 수 있지만, 일반적인 방법은 var 및 setVar으로 명명하는 것입니다.예를 들어 위의 예에서 우리는 그것을 count과 setCount으로 명명했다.

위의 예시에서 우리는 매개 변수 0을 사용하여 useState을 호출했다.이것은 상태의 초기 값이 0이라는 것을 의미한다.count에는 상태 값이 포함되어 있습니다.setCount은count값을 설정할 수 있는 함수입니다.useState이 React에서 어떻게 사용되는지 완전한 구성 요소 예시를 보겠습니다.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function increment() {
        setCount(count + 1)
    }
    return (
        <button onClick={increment}>{count}</button>
    )
}

이것은count 값을 표시하는 간단한 단추를 보여 줍니다.처음에 그것은 0이었다.버튼을 클릭할 때마다 setCount을 사용하여 계수 값을 1 증가시킵니다.상태가 바뀌면 구성 요소가 다시 시작되고 새 계수 값이 단추에 표시됩니다.

기능 업데이트

위의 구성 요소를 살짝 수정합시다.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(count + 2)
        setCount(count + 1)
    }
    return (
        <button onClick={incrementBy3}>{count}</button>
    )
}

지금, 당신이 단추를 눌렀을 때, 당신은 증가량이 얼마나 되기를 희망합니다.계수가 2 늘어날까요?(또는) 그것은 1을 증가시킵니까?(또는) 얘가 3 늘어날까요?
를 클릭하고 사용해 봅니다.
여기는 상응하는 코드 샌드박스입니다.
당신은 계수가 1만 증가하는 것을 관찰할 수 있습니다.React가 상태 업데이트를 수행하는 방법 때문입니다.많은 상태 업데이트가 일괄 처리되고 비동기적으로 실행됩니다.따라서 같은 위치에서 두 개의 setState 호출이 있으면 두 번째 상태 업데이트를 실행하기 전에React에 의존하여 첫 번째 상태 업데이트를 완성할 수 없습니다.
위의 예를 예로 들자.

최초, count은 0.

버튼을 클릭합니다.

우선, React는 setCount(count + 2)을 실행합니다.

렌더링의 count 값은 0입니다.

React는 count의 값을 계산하여 다음 렌더링을 count + 2, 즉 2로 합니다.

이지만 어셈블리가 다시 렌더링되지 않았습니다.따라서 변수 계수의 현재 값은 여전히 0이다.

이제 React에서 setCount(count + 1)을 실행합니다.

은 count의 값이 여전히 0이기 때문에 React는 count의 값을 계산하여 다음 렌더링을 count + 1, 즉 1로 합니다.

에서 setCount(count+2)을 실행할 때 다음 상태의 값은 2입니다.현재 이 값은 다음 상태 setCount(count+1)의 값으로 덮어씁니다. 즉, 1입니다.

현재 모든 상태 업데이트가 실행되었기 때문에 React는 다음 상태의 값 1을 사용하여 구성 요소를 다시 시작합니다.

이것이 바로 당신이 버튼을 눌렀을 때 3이 아니라 1만 증가하는 이유입니다.

비록 발생하고 있는 문제를 이해하는 데는 시간이 걸리지만, 이 문제를 해결하는 방법은 그리 복잡하지 않다.
지금까지 우리는 setCount이 값을 매개 변수로 하는 것을 보았다.그러나 setCount의 매개 변수로 리셋됩니다.이 리셋 함수의 첫 번째 매개 변수는 상태의 이전 값입니다.
예를 들어, 계수를 1 늘리려면 다음과 같이 하십시오.

setCount(previousCount => previousCount + 1)

이러한 리셋 함수를 사용하여 상태를 업데이트할 때, 구성 요소가 다시 제출하지 않았더라도 prevCount이 항상 정확한 상태 값을 가지고 있는지 확인할 수 있습니다.이것이 바로 상태의 이전 값에 따라 상태의 다음 값을 계산할 때마다 항상 이런 유형의 업데이트를 사용하는 것을 권장하는 이유이다.
우리는 이런 방법을 사용하여 위의 예시를 다시 쓰자.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(previousCount => previousCount + 2)
        setCount(previousCount => previousCount + 1)
    }
    return (
        <button onClick={incrementBy3}>{count}</button>
    )
}

이것은 계수를 정확하게 3 증가시킬 것이다.

지연 초기화

const initialValue = resultOfSomeExpensiveOperation()
const [state, setState] = useState(initialValue)

이전에 우리는 이미 useState이 초기 값을 매개 변수로 하는 것을 보았다.
기술적으로 React는 구성 요소를 처음 설치할 때만 초기 값이 필요합니다.이후 initial Value는 더 이상 적용되지 않습니다.따라서 만약 비싼 연산을 통해 초기값을 계산한다면, 우리는 이러한 연산이 시작할 때만 실행되기를 바란다.우리는 하나의 예를 통해 이것이 실제로 발생했는지 아닌지를 봅시다.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return <button onClick={increment}>{count}</button>;
}

버튼을 누르고 컨트롤러를 확인해 보세요.

버튼을 클릭할 때마다 getInitialValue 함수가 실행되고 있는 것을 볼 수 있습니다.그래서 재방송 때마다 불려온다.

따라서 이 함수에서 비싼 작업이 필요하면 매번 다시 렌더링한 후에 실행됩니다.

그러나 getInitialValue의 첫 번째 실행만이 React에 유용합니다.상태가 후속 재방송에 설정되어 있기 때문에 모든 다른 것은 버려질 것이다.

이 때문에 응용 프로그램의 성능 문제가 발생할 수 있는 이유를 알 수 있습니다.

React는 이러한 상황을 처리하는 방법을 제공합니다.그것은 Lazy Initialization of State이라고 합니다.
값을 매개 변수로 직접 전달하는 것이 아니라 전송 리셋 함수를 선택할 수 있습니다. 리셋 함수는 실행할 때 초기 값을 제공합니다.React는 필요할 때만 이 기능을 수행합니다.이것은 시작할 때만 필요하기 때문에 React는 시작할 때 이 함수를 한 번만 실행합니다.
지연 상태를 초기화하기 위해 위의 예시를 다시 쓰겠습니다.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(() => getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return <button onClick={increment}>{count}</button>;
}

상술한 예시에서 우리가 한 변경은 useState(getInitialValue())에서 useState(() => getInitialValue())으로 바뀌었다.
상술한 코드 샌드박스의 컨트롤러를 검사할 수 있습니다.단추를 누르면 getInitialValue이 호출되지 않은 것을 볼 수 있습니다.그것은 시작할 때만 호출된다.

객체와 함께 사용 상태

useState 갈고리를 사용하여 모든 종류의 상태, 심지어 대상을 관리할 수 있습니다.
예를 들어 useState 갈고리를 사용하여 하나의 대상의 이름과 성 상태를 관리합니다.

const [name, setName] = useState({
    firstName: 'Bhanu Teja',
    lastName: 'P'
})

현재,name 대상을 업데이트하기 위해 setName을 호출할 때,firstName과lastName을 동시에 제공해야 합니다.
예:

setName({
    firstName: 'New First Name',
    lastName: 'New Last Name'
})

이름이나 성만 업데이트하고 싶으면요?spread 조작부호를 사용하여 이 조작을 실행할 수 있습니다.

function setFirstName(firstName) {
    setName({
        ...name,
        firstName
    })
}

function setLastName(lastName) {
    setName({
        ...name,
        lastName
    })
}

우리 모든 것을 함께 놓자.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState({
    firstName: "Bhanu Teja",
    lastName: "P"
  });

  function setFirstName(firstName) {
    setName({
      ...name,
      firstName
    });
  }

  function setLastName(lastName) {
    setName({
      ...name,
      lastName
    });
  }

  return (
    <>
      <input
        placeholder="First Name"
        type="text"
        value={name.firstName}
        onChange={(e) => setFirstName(e.target.value)}
      />
      <input
        placeholder="Last Name"
        type="text"
        value={name.lastName}
        onChange={(e) => setLastName(e.target.value)}
      />
      <p>
        Your name is:{" "}
        <strong>
          {name.firstName}.{name.lastName}
        </strong>
      </p>
    </>
  );
}

useState과 수조의 용법은 대상과의 용법과 매우 유사하다.

뭐 공부 해요?

자세한 내용은 다음과 같습니다.

은 갈고리가 무엇이고, React에서 흔히 볼 수 있는 갈고리는 무엇입니까?

useState 후크:

은 상태의 초기 값을 매개 변수로 하고 두 요소로 구성된 수조를 되돌려줍니다. 한 요소는 상태 값을 가지고 있고, 다른 요소는 상태 값을 업데이트하는 함수입니다.

은 어떻게 상태에 대해 기능 업데이트를 진행합니까?

왜 기능 업데이트를 사용하지 않으면 어떤 상황에서 문제가 발생합니까?

이전 상태에서 다음 상태를 계산할 때 항상 기능 업데이트를 사용하여 상태를 업데이트하는 것을 권장합니다.

상태의 지연 초기화 및 언제 사용할 수 있습니까?

은 useState을 대상과 그룹에 사용합니다.

다음은 뭐예요?

다음 글에서 useEffecthook에 대한 모든 정보를 알아보겠습니다.

다음까지👋

만약 이것이 당신에게 도움이 된다면, 다른 사람에게도 전해질 수 있도록 좋아하고 나누세요.나의 최신 글에 대한 이메일 알림을 받으려면 페이지 맨 위에 있는 구독 단추를 누르면 my blog에 구독할 수 있습니다.너도 트위터에서 나를 팔로우할 수 있다.