React setState와 후속 코드의 실행순서 뒤바뀜 해결

state를 변화시킨 뒤에 실행되어야 하는 코드가 있을 때, 단순히 위-아래의 순서로 나열해서는 의도대로 동작하지 않을 수 있다.

 

// Class component
export default class App extends React.Component {
  state = {
  	a : true,
  };

  setState( { a : false } );
  goHome();

  render () {
  	return ( < > ~-~-~-~- </ > );
  }
}

function goHome () {
	// 퇴근시켜주세요!! 퇴근시켜주세요!!
}

//function component
export default function App() {
    const [a, setA] = useState(true);

    setA(false);
    goHome();

    return ( < > ~-~-~-~- </ > );
}

function goHome () {
	// 퇴근시켜주세요!! 퇴근시켜주세요!!
}

위 코드의 원래 의도는 state값 a를 변화시키고 > 렌더링하고 > goHome을 실행하는 것이었다.

 

// Class component : SOLVED
export default class App extends React.Component {
  state = {
  	a : true,
  };

  setState( { a : false }, goHome );
  

  render () {
  	return ( < > ~-~-~-~- </ > );
  }
}

클래스 컴포넌트의 setState의 경우 콜백으로 goHome을 넣어주면 해결된다

 

//function component : SOLVED
export default function App() {
    const [a, setA] = useState(true);
    useEffect( 
    	() => { goHome(); }
    	, [a]
    );
    
    setA(false);
   
    return ( < > ~-~-~-~- </ > );
}

함수 컴포넌트에서 훅을 사용한다면 useEffect를 사용하면 해결된다.