[React] 비동기로 동작하는 setState에 대한

 

이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다.

 

이슈

• 개발을 하는 중, setState함수가 실행되어 값이 변경되었음에도, state를 사용하는 함수는 한 박자 늦게 변경되는 이슈가 있었습니다.
• 이러한 이유의 원인을 찾아보니 setState가 비동기 함수라서 그렇다고 합니다.
• setState 함수는 이벤트 핸들러 함수에서 바로 값을 경신(변경)하는 것이 아니라, 이벤트 핸들러 함수가 종료 후 react에 의해 state값이 경신됩니다.

 

해결방안

• react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다.
• setState 함수로 state의 값을 변경 후 경신된 값을 콘솔에 출력하거나 다음 함수에서 사용하기 위해서는 setState의 Callback 함수를 사용해야 합니다.

 

setState의 Callback 함수를 사용해야 하는 이유 (예시)

우선, Callback 함수를 사용하지 않은 경우 어떠한 문제가 발생하는지 알아봅시다.

 

다음은 [* 2] 버튼을 클릭하면 this.state.num의 값을 2배로 변경 후 콘솔에 this.state.num의 값을 출력하는 함수입니다.

twiceButtonClick = () => {
    this.setState({ num: this.state.num * 2 });
    console.log("state : " + this.state.num);
  };

 

실행 결과

[* 2] 버튼을 클릭 전 결과입니다.

 

[* 2] 버튼을 클릭 후 결과입니다.

 

setState 함수가 실행되어 this.state.num의 값이 2로 변경되었는데, 같은 twiceButtonClick() 함수에 들어있는 console.log()의 실행의 값인 콘솔에는 변경되기 전 값이 출력되었습니다.//한 박자 늦은 값이 출력이 된다.

※참고 : https://developer-talk.tistory.com/229

 

---

 

 

setState의 Callback 함수 사용 방법 

1. class 컴포넌트의 setState Callback을 사용한다.
2. 생명 주기 함수 componentDidUpdate을 사용한다.
3. Function 컴포넌트의 setState callback을 사용한다.

3번 방법인 Function 컴포넌트의 setState callback을 사용했습니다.

 

React 16.8 이후 도입된 Hook은 useState 함수를 사용해서 state를 갱신할 수 있습니다.

단, useState 함수는 두 번째 인수가 존재하지 않습니다.

대신 useEffect에 선택적 인수로 두 번째 인수인 의존성 배열을 사용합니다.

 

컴포넌트에서 핵심 코드는 useEffect 함수입니다.

const [state, setState] = useState({
        anYear : new Date().getFullYear(),
        anMonth : "0" + (new Date().getMonth()+1),
        activeTab : 'an_month',
        btnClicked : 'an_month',
    });

useEffect(() => {
        getvisitant();
    }, [state.anMonth]);


const getvisitant = async () => {
	//...
	}

 

두 번째 인자로 [state.anMonth]을 전달하여 anMonth이라는 state가 변경되면, useEffect 함수가 실행되도록 합니다.

 

 

마무리

본 예제 코드는 간단해서 코드가 많이 단순해지는 것처럼 보이지 않지만, 실제 프로젝트에서 사용되는 복잡한 클래스 컴포넌트를 useState()를 사용해서 함수 컴포넌트로 리팩토링을 해보면 그 진가를 확인하실 수 있으실 것입니다.