🟦 [React] input, useState는 비동기 처리, useEffect는 동기적 처리

input에 쓰는 글을 console.log로 실시간으로 보고 있는데 비동기 처리에 대한 걸 알았다!

비동기 처리란?

- 비동기 처리(asynchronous processing)는 작업이 시작된 후 그 결과를 기다리지 않고, 다음 작업을 바로 실행하는 프로그래밍 방식

- 비동기 작업은 주로 시간이 걸리는 작업(예: 네트워크 요청, 파일 읽기, 타이머, 상태 업데이트)에서 사용

 

useState의 변경함수는 바꾸는데 시간이 좀 걸려서 처음 글자는 못 가져 온다고 한다.

이것이 비동기 처리!

 

코드 👇

import { useState } from 'react'
import './App.css'

function App() {
  let [입력값, 입력값변경] = useState('');

  return(
    <>
      <input onChange={(e) => {
        입력값변경(e.target.value); ✅
        console.log(입력값);}}
      />
    </>
  )
}
export default App;

 

결과 👇

 

📌 발생 순서

1. 사용자가 입력 필드에 값을 입력하면 onChange 이벤트가 발생

2. 이벤트 핸들러가 실행되며 입력값변경(e.target.value)가 호출

3. 입력값변경(e.target.value)를 호출하면 React가 입력값 상태를 업데이트

    3-1. 하지만 React 상태 업데이트는 비동기적으로 처리되므로, 상태 값(입력값)은 즉시 변경되지 않음

4. console.log(입력값)은 상태가 업데이트되기 전에 실행되므로 이전 상태 값이 출력

 

📌 비동기 처리로 발생한 상황

=> console.log(입력값)은 상태가 변경되기 전에 실행되므로 이전 상태 값이 출력

 

 

개선 코드1 👇

import { useState } from 'react'
import './App.css'

function App() {
  let [입력값, 입력값변경] = useState('');
  console.log(입력값); ✅

  return(
    <>
      <input onChange={(e) => {
        입력값변경(e.target.value);
      }}
      />
    </>
  )
}
export default App;

 

결과 👇

 

👩🏻: 

이렇게 쓰면 바로바로 console.log에 찍히긴 하는데 useState 자체가 비동기 방식이라서 그렇게 보일 수 있다고 한다.

당장 해결은 가능하나, 좋은 방법은 아닌 듯?

 

❗❗

=> 상태 업데이트가 완료되기 전에 console.log가 실행되므로, 항상 이전 상태 값이 출력

=> 실시간으로 변경 값을 알고 싶다면 올바른 방법이 아님

 

 

개선 코드2 (useEffect) 사용 👇

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  let [입력값, 입력값변경] = useState('');

  // 상태가 변경된 이후 실행되는 useEffect
  useEffect(() => {
    console.log(입력값);
  }, [입력값]); // 입력값이 변경될 때마다 실행

  return (
    <>
      <input
        onChange={(e) => {
          입력값변경(e.target.value); // 상태 업데이트
        }}
      />
    </>
  );
}

export default App;

 

📌 코드 실행 순서

1. 컴포넌트 렌더링

-> 컴포넌트가 처음 렌더링되면, useState 훅이 호출되어 입력값이라는 상태 변수와 상태를 변경하는 함수인 입력값변경을 반환

2. 사용자 입력(onChange)

3. 상태 업데이트 (입력값 변경)

-> 입력값변경(e.target.value)가 호출되면, React는 상태 업데이트를 비동기적으로 처리 후 상태 값은 바로 변경되지 않고, React가 렌더링을 새로 수행해야 변경된 값이 반영

4. 컴포넌트 재렌더링

-> 상태가 변경되면, React는 다시 컴포넌트를 렌더링 (입력값이 새로운 값으로 갱신)

5. useEffect 실행

-> 렌더링 이후에 실행

-> useEffect의 두 번째 인자인 [입력값] 배열이 있기 때문에 입력값이 변경될 때마다 실행

-> 상태가 변경되어 컴포넌트가 재렌더링되었기 때문에 useEffect가 실행되며, console.log(입력값)이 최신 상태 값을 출력

 

📌 useEffect를 사용한 상황

=> useState에 의한 상태 변경은 비동기적으로 처리되지만, useEffect로 그 결과를 처리하는 것은 동기적처럼 보이게 됨

 

❗❗ 

=> useEffect는 렌더링 이후 실행 -> 입력값이 변경된 후에, 변경된 값을 확실하게 확인 가능!!

=> useEffect는 상태가 변경된 후 추가적인 작업(예: API 호출, 다른 상태 업데이트 등)을 처리하는 데 유용

 

 

📌 개선 코드1과 개선 코드 2의 차이점

- 상태 변경 후의 작업이나 최신 상태 값을 처리하고 싶다면 useEffect를 사용하는 것이 더 적합.

- 상태 변경 전의 값을 확인하거나, 상태 업데이트 직후의 값을 바로 처리할 필요가 없다면 let 아래에서 console.log()를 사용할 수 있지만, React의 상태 변경 흐름을 고려하면 useEffect를 사용하는 것이 더 일관되고 안전한 방식