Rapid Fire 반응: useState가 실행될 때까지 기다리는 방법은 무엇입니까?

나머지 코드를 계속 실행하기 전에 useState를 업데이트하고 싶었던 적이 있습니까? 클래스 구성 요소를 사용할 때 상태가 업데이트된 후 코드를 실행할 수 있는 setState에 대한 매우 유용한 콜백이 있었습니다. 무슨 말인지 알 수 있도록 몇 가지 코드를 살펴보겠습니다.

class Home extends React.Component {
  state = {
    counter: 1,
  };

  increment = () => {
    this.setState(
      (state: State) => ({
        counter: state.counter + 1,
      }),
      () => {
        console.log(this.state.counter);
      }
    );
  };

  render() {
    return <div onClick={this.increment}>{this.state.counter} </div>;
  }
}

여기에서 setState에 대한 콜백을 전달하여 상태 업데이트 직후에 업데이트 카운터에 액세스할 수 있도록 합니다. 여기에서는 업데이트가 보장되지만 기능적 구성 요소에 대해 동일한 작업을 수행하려는 경우에는 어떻게 해야 합니까? 그리고 후크.

음, 동일한 수준의 편의성을 가진 직접적인 대안은 없지만 구조에 대한 React 후크 옵션이 있습니다: useEffect.

useEffect는 모든 거래의 잭이라고 할 수 있지만 마스터는 없는 후크 중 하나입니다. 실제로 componentDidMount, componentDidUpdate 또는 componentWillUnmount에 완벽하게 들어맞는 것은 아니지만 장점은 내가 생각하기에 모든 것을 대체할 수 있다는 것입니다.

여기에서 useEffect를 사용하여 해당 상태 변경을 수신하고 콜백에서 실행하려는 코드를 실행할 수 있습니다. 그러나 이 경우 클래스 구성 요소에서 사용했던 것처럼 상태를 즉시 업데이트하도록 강제로 반응하는 것이 아니라 변경 사항이 발생할 때 코드를 실행할 수 있도록 변경 사항을 수신하고 있습니다. 코드를 살펴보자

const Home: NextPage = () => {
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    // here I am guaranteed to get the updated counter
    // since I waited for it to change.
    console.log(counter);
    // here we added counter to the dependency array to
    // listen for changes to that state variable.
  }, [counter]);

  const handleClick = () => {
    setCounter(counter => counter + 1);
  }

  return <div onClick={handleClick}> {counter} </div>
};

export default Home;

여기서 살펴볼 두 가지 구현 간에는 한 가지 차이점이 있습니다.

useEffect는 우리가 처한 특정 상황에서만 원하는 코드를 실행하는 클래스 구성 요소 구현과 달리 counter에 대한 모든 변경 사항을 듣고 효과를 실행합니다. 이 경우 클래스 구성 요소의 콜백은 언제와 관련하여 더 정확합니다. 실행됩니다.

useEffect에 대한 자세한 내용은 docs을 참조하십시오.

후크에 대해 더 깊이 알아보고 자신만의 후크를 작성하고 싶다면 다음을 설명하는 기사를 작성했습니다.