[React] 비동기 useState 동기로 처리하기

다들 리액트 프로젝트에서 useState를 쓰며 당황했던 적이 있을거라 생각한다.

리액트의 useState를 쓰다보면 우리가 원하는 대로 동작하지 않는 걸 확인할 수 있다.

 

아래 코드는 체크박스가 하나 존재하고 체크할때마다 상태 toggle 값이 true or false를 가지는 로직이다. 

체크박스를 체크하는 걸로 상태값을 바꾸는 예시를 보고 결과를 예상해보자

import React, { useState } from "react";

function App() {
  const [toggle, setToggle] = useState(false);

  const onChange = () => {
    setToggle((toggle) => !toggle);
    
    if(toggle) {
    	console.log('toggle은 True');  // 무엇이
    } else {
    	console.log('toggle은 False'); // 나올까요
    }
  };

  return (
    <>
      <input type="checkbox" onChange={onChange} />
    </>
  );
}

우리는 당연하게도 함수 내부의 setToggle로 인해 toggle 상태값이 true로 변경됐고, 밑에 if문에서 toggle은 True가 출력될거라 생각한다.

 

그러나 허무하게도 리액트는 우리 예상과 다르게 toggle은 false가 출력되는 걸 확인할 수 있다.(비동기....😇)

그러나 리액트는 우리에게 useEffect라는 강력한 도구를 지원해준다!!

 

useEffect 사용

import React, { useState, useEffect } from "react";

function App() {
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
  	if(toggle) {
    	console.log('toggle은 True');
    } else {
    	console.log('toggle은 False');
    }
  }, [toggle])
  
  const onChange = () => {
    setToggle((toggle) => !toggle);
  };

  return (
    <>
      <input type="checkbox" onChange={onChange} />
    </>
  );
}

useEffect를 선언해 toggle이 바뀔때마다 해당 로직이 돌아가도록 구성하면 누가봐도 동기적으로 처리하는 걸 알 수 있다.
setState를 동기적으로 처리하는 방법을 찾기보다(코드가 아주 더러워질 것이다), hook에서 제공하는 다양한 기능들을 사용해
동기적이길 원하는 로직을 구성해보자!

 

어떤 오류가 있으면 그 부분에서 해결책을 고민할 게 아니라 넓게 고민하는 자세를 가져야 할 것 같다.

 

useEffect는 아주 강력한 도구이므로 공식 문서를 통해 완벽하게 익히는 걸 추천한다.

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React