Reactjs의 setState는 비동기(asynchronous)로 동작 합니다.

28 Nov 2020

Reading time ~1 minute

Reactjs의 setState는 비동기(asynchronous)로 동작 합니다.

ReactJS의 useState는 비동기로 동작합니다.

다음의 코드는 이전 값으로 통신을 하게 됩니다.

import React from "react";
import "./styles.css";

export default function App() {
  const [val, setVal] = React.useState("");

  const callAjax = () => {
    console.log(val);
  };
  const changeVal = (cVal) => {
    setVal(cVal);
    callAjax();
  };
  return (
    <div className="App">
      <h1>Reactjs setState is asynchronous</h1>
      <select value={val} onChange={(e) => changeVal(e.target.value)}>
        <option value="">ALL</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </div>
  );
}

그럼 어떻게 해야 할까요?

바로 useEffect로 val 값의 변화를 감지해서 호출하도록 수정해야 합니다.

아래와 같이 수정해야 정상적으로 동작합니다.

import React from "react";
import "./styles.css";

export default function App() {
  const [val, setVal] = React.useState("");

  React.useEffect(() => {
    const callAjax = () => {
      console.log(val);
    };

    callAjax();
  }, [val]);

  const changeVal = (cVal) => {
    setVal(cVal);
  };
  return (
    <div className="App">
      <h1>Reactjs setState is asynchronous</h1>
      <select value={val} onChange={(e) => changeVal(e.target.value)}>
        <option value="">ALL</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </div>
  );
}

useState를 사용할때 꼭 기억하세요!

예제바로보기