React의 게으른 초기 상태

React 애플리케이션의 성능에 대한 가장 중요한 측면 중 하나는 구성 요소가 변경 사항에 반응하는 방식입니다. hooks에 2019을 도입한 후 함수를 사용하는 구성 요소의 정의가 새로운 표준이 되었습니다.

여기에는 흥미로운 부작용이 있습니다. React가 구성 요소의 잠재적 변화를 감지할 때마다 전체 함수가 실행됩니다. 이전에는 클래스로 정의된 구성 요소가 수명 주기 메서드( componentDidMount 등) 및 잘 알려진 메서드render와 같은 특정 메서드만 실행했습니다.

이를 관리하기 위해 React는 놀라운 useEffect hook 을 추가했습니다. 그러나 함수는 호출될 때 내부의 모든 코드를 실행한다는 점을 명심하는 것이 중요합니다.

React에서 상태 초기화

useState hook을 사용하여 React에서 상태를 초기화할 수 있습니다.

import { useState } from "react";

const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  // Increment the given counter
  const incrementCounter = () => setCounter(counter + 1);

  return (
    <section aria-label="Counter">
      <button onClick={incrementCounter}>Increment</button>
      <output>{counter}</output>
    </section>
  );
};

MyComponent는 현재 카운터 값을 관리하기 위한 새로운 상태를 정의합니다. 이전 문 다음에 React는 잠재적인 변경 사항을 감지할 때마다 MyComponent 함수를 호출하고 실행 결과를 애플리케이션의 이전 상태와 비교합니다.

이제 이 함수를 자세히 살펴보면 여러 호출과 정의가 있습니다.

useState로 전화

incrementCounter 함수 정의

내부적으로 JSX 메서드 호출

그 외에도 일반적으로 잊혀지는 작은 세부 사항이 있습니다. 0도 평가됩니다. 그렇다면 초기 상태 값을 계산하기 위해 함수를 호출해야 한다면 어떻게 될까요?

게으른 초기 상태

이제 다음 코드를 확인해 보겠습니다.

import { useState } from "react";
import { initState } from "./utils";

const MyComponent = () => {
  const [value, setValue] = useState(initState());

  // ...
};

이 경우 useState는 정적 값이 아니라 함수 결과를 매개 변수로 받습니다. initState 함수는 React가 MyComponent를 호출할 때마다 호출됩니다. 그러나 useState 결과를 한 번만 사용하십시오. 마운트된 후 다음에 구성 요소를 실행하면 initState 결과가 삭제됩니다.
initState의 복잡성에 따라 최초 초기화 후에도 MyComponent에서 일부 성능 문제가 발생할 수 있습니다. 이를 방지하기 위해 React에서는 한 번만 실행되는 함수를 전달할 수 있습니다.

import { useState } from "react";
import { initState } from "./utils";

const MyComponent = () => {
  const [value, setValue] = useState(() => initState());

  // ...
};

이 트릭을 lazy state initialization 이라고 합니다.

기본적으로 게으를 필요는 없습니다.

공정해지자. 다행스럽게도 상태는 대부분 정적 값으로 초기화됩니다. 모든 응용 프로그램이 이 기능useState의 혜택을 받는 것은 아닙니다. 그러나 이것은 감지하기 어려운 성능 문제 중 하나이며 솔루션은 매우 간단합니다.

상태를 초기화하기 위해 함수를 호출해야 할 때를 염두에 두십시오. 그리고 구성 요소가 마운트될 때 결과를 기다려야 하기 때문에 요구 사항인 경우 두 번 생각하십시오.

참조

React Hooks

React useState Hook