[React] response할 때 주의사항

 

다음과 같이 response 값을 set(useState)을 이용해서 하게 되면 submit을 두 번해야하는 문제가 발생한다. 추측건대 아마 setResult가 다 실행되기 전에 if (result) 문이 실행되기 때문이다. axios.post는 비동기이기 때문에 setResult도 비동기로 처리가 되기 때문이다.

    axios.post( "http://localhost:8000/signup/id_validation", body ).then( ( res ) => {
      console.log( res.data )
      setResult( res.data )
    } ).catch( error => {
      // 요청 중 에러가 발생했을 때 처리
      console.error( error );
    } );
    if ( result ) {
      if ( result.type ) {
        let path = '/auth/signup/password';
        navigate( path, { state: { userName: id } } );
      }
      else {
        console.log( result.message )
      }
    }

따라서 다음과 같이 axios post 안에서 처리되도록 한다.

axios.post( "http://localhost:8000/signup/id_validation", body ).then( ( res ) => {
      console.log( res.data )
      const result = res.data
      if ( result.type ) {
        let path = '/auth/signup/password';
        navigate( path, { state: { userName: id } } );
      }
      else {
        console.log( result.message )
      }

    } ).catch( error => {
      // 요청 중 에러가 발생했을 때 처리
      console.error( error );
    } );

이렇게 하면 될 거 같은데 안된다.

axios.post( "http://localhost:8000/signup/id_validation", body ).then( ( res ) => {
      console.log( res.data )
      // const result = res.data
      setResult( res.data )
      if ( result.type ) {
        let path = '/auth/signup/password';
        navigate( path, { state: { userName: id } } );
      }
      else {
        console.log( result.message )
      }

    } ).catch( error => {
      // 요청 중 에러가 발생했을 때 처리
      console.error( error );
    } );

그 이유는 setResult가 실행되면 리렌더링 시점에서 값이 바뀌게 된다. 따라서 그 이후 라인들은 업데이트가 되기 전의 값으로 작동이 되는 것이다.