[React] async onClick에서 useState set함수 안되는 현상 (axios get loading 구현)

나장봇 개발 도중 예전부터 뭔가 찜찜하게 생각했던 오류에 대해서 한번 알아보고 파헤쳐보도록 하겠닷!

현재 나의 onClick 함수의 형태이다.

아주 직관적이지 않은가? 함수를 실행하기전 loading을 true로 바꿔주고, 실행이 끝나면 다시 false로 바꾸어주는,,, 이렇게 하면 안되는 줄 알았다.ㅋㅋ 조금 js에 대해서 팠다고 아는척했다가 큰코 다침ㅋㅋ 아주 잘되는 코드입니당... 그래도 정리하자면

await는 async 함수만을 정지시킨다!

이 개념을 챙겨두면 결국 await는 getDetail 함수를 일시정지하고 마이크로 태스크 큐로 넘어가고 이벤트루프는 나머지 콜스택을 모두 처리하고 마이크로 태스크 큐에서 콜스택으로 다시 async함수가 올라와 이벤트루프가 처리해줄 것이다. 참조, async await는 어떻게 동작할까

이론은 이렇게 기능또한 아주 잘 작동하는데, 콘솔창에는 이렇게 찍힌다. 배운것을 써먹자!!!
useState의 set함수는 비동기로 작동한다고 한다.. 난 useState를 하나도 모르고 썼던 모냥이다.. 게다가 set함수는 컴포넌트 외부의 값을 변경하는 것이기에 상태가 변경된 직후 리렌더링이 되기 전까지는 이전의 값을 참조한단다... (set함수 실행 후 바로 console.log() 찍어도 이전 값이 그대로 나오는 이유..) 참조, useState setState 인자(값, 함수)
한번 정리를 해야할 것같다... 인자로 값주는 것과 함수로 주는 것에대해서 어렴풋이 차이를 알았으나 개념은 몰랐다.ㅠㅠ 그래도 로딩은 잘 구현했다! ㅎㅎ

수정된 코드

  const [detailData, setDetailData] = useState<DetailType[]>([]);
  const [detailLoading, setDetailLoading] = useState<boolean>(false);

  const clickedItem = async (keyword: string) => {
    /* loading start */
    setDetailLoading(true);

    /* Axios get data */
    const data = await getDetail(keyword.slice(0, 11));
    setDetailData(data);

    /* end Loading */
    setDetailLoading(false);
  };
...
...
...

이로써 야무진 로딩을 만들었다! 고생했당