리액트 훅 - 변수와 useState 사용

리액트 훅 - 변수와 useState 사용

React Hooks에는 useState 옵션이 있으며 Hooks와 Class-State의 비교가 항상 표시됩니다.하지만 Hooks와 몇 가지 규칙적인 변수는 어떻습니까?

예를들면,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

Hooks를 사용하지 않았으며 다음과 같은 결과를 얻을 수 있습니다.

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

그럼 뭐가 다른데?이 경우 Hooks를 더 복잡하게 사용하면...그럼 왜 이걸 사용하기 시작했죠?

그 이유는 당신이useState시야가 다시 넓어집니다.변수 자체는 메모리의 비트만 변경하며 앱 상태는 보기와 동기화되지 않을 수 있습니다.

다음 예시와 비교해 보십시오.

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

어느 경우든a클릭 시 변경되지만 사용 시에만 변경useState뷰가 올바르게 표시되다a의 현재 값

로컬 변수는 변환 시 모든 렌더에서 재설정되지만 상태는 다음과 같이 업데이트됩니다.

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

와 동등하다

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

뭐?useState반환은 다음 두 가지입니다.

1. 새로운 상태 변수
2. 그 변수의 세터

부르면setA(1)당신은 전화할 것이다this.setState({ a: 1 })재시도를 트리거합니다.

첫 번째 예제는 데이터가 기본적으로 변경되지 않기 때문에만 작동합니다.사용 개시점setState상태가 정지했을 때 컴포넌트 전체를 재렌더하는 것입니다.따라서 예에서 상태 변경 또는 관리가 필요한 경우 변경 값이 필요하다는 것을 금방 알 수 있으며, 보기를 변수 값으로 업데이트하려면 상태 및 재렌더링이 필요합니다.

상태를 업데이트하면 구성 요소가 다시 렌더링되지만 로컬 값은 그렇지 않습니다.

이 경우 컴포넌트에서 이 값을 렌더링했습니다.즉, 값이 변경되면 컴포넌트를 다시 렌더링하여 업데이트된 값을 표시해야 합니다.

그래서 사용하는 것이 더 나을 것이다.useState표준 로컬 값보다 커집니다.

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

표준 변수를 사용하는 것은 완벽하게 허용됩니다.다른 답변에서는 알 수 없는 것은 이러한 변수가 상태 변수를 사용하는 경우 해당 값이 재렌더 이벤트에서 업데이트된다는 것입니다.

고려사항:

import {useState} from 'react';

function NameForm() {
  // State-managed Variables
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // State-derived Variables
  const fullName = `${firstName} ${lastName}`;

  return (
    <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    <input value={lastName} onChange={e => setLastName(e.target.value)} />
    {fullName}
  );
}

/*
Description: 
  This component displays three items:
    - (2) inputs for _firstName_ and _lastName_ 
    - (1) string of their concatenated values (i.e. _lastName_)
  If either input is changed, the string is also changed.
*/

업데이트 중firstName또는lastName는 상태를 설정하고 재검색을 일으킵니다.그 과정의 일환으로서fullName에는 firstName 또는 lastName의 새로운 값이 할당됩니다.상태 변수에 fullName을 넣을 이유는 없습니다.

이 경우 설계상 불량으로 간주됩니다.setFullNamestate-setter: firstName 또는 lastName을 업데이트하면 재렌더가 발생하고 fullName을 업데이트하면 다른 재렌더가 발생하지만 값의 변화는 인식되지 않습니다.

---

뷰가 변수에 의존하지 않는 경우에는 값이 표시되는지 여부에 관계없이 소품 값의 포맷이나 루프 등 로컬 변수를 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/58252454/react-hooks-using-usestate-vs-just-variables