Promise fulfilled, but PromiseResult is undefined??😨

로그인, 회원가입, todo Form 작성 axios로직들은 모두 분리를 했지만
todo title 받아오기, todo detail 받아오기 로직들은 UI 컴포넌트 내에 같이 작성해주었다.

처음에는 todo title, todo detail axios로직들도 분리를 해주려고 했고 코드도 작성했다.
그런데 분리한 로직에서 return값을 받아와서 사용할 컴포넌트에서 콘솔에 찍어보면 Promise {<pending>}값이 찍히고 PromiseResult값은 undefined가 찍히는 것이다.

이때 작성한 코드 ⬇

// axios get 요청 (todo title)

  const getTodo = async () => {
    try {
     await axios
        .get('http://localhost:8080/todos', {
          headers: {
            Authorization: token,
          },
        })
        .then((result) => 
              console.log(result.data.data)
              return result
             );
    } catch (error) {
      console.log(error);
    }
  };

// TodoTitle 컴포넌트에서 get 요청 결과 받아오기

useEffect(() => {
    token && console.log(getTodo());
  }, [create, id]);

왜 이런지 모르겠고 그래서 어떻게 수정해야 하는지 감🍊도 안 와서 구현 당시에는 일단 넘어갔다.
+ 10월 2일
ㅎㅎㅎ 당연히 undefined가 찍히겠지. return값이 하나도 없는데😩
그리고 async awiat을 이용한 axios요청을 받아왔으니까 Promise가 넘어온 거였고. 만드는 당시에 어떻게 해야 하지에 집중해서 그런가 빨리 캐치를 못했네. 절대 못 잊을 듯.

요청을 보내면서 then으로 결괏값을 받아오기 때문에, 로직을 작성한 컴포넌트쪽에서는 결괏값이 콘솔에 잘 찍히는데, 이게 TodoTitle컴포넌트에서 콘솔을 찍으면 Promise {<pending>}값이 찍힌다.

왜 그런지는 모르겠어서 요청을 보내는 쪽에서는 요청만 보내고 컴포넌트에서 결괏값을 받아오는 방식으로 일단 코드를 바꿔봤다.

// 수정한 axios get 요청 (todo title)

  const getTodo = async () => {
    try {
      const result = await axios
        .get('http://localhost:8080/todos', {
          headers: {
            Authorization: token,
          },
        })
      return result
    } catch (error) {
      console.log(error);
    }
  };

// 수정한 TodoTitle 컴포넌트에서 get 요청 결과 받아오기

  useEffect(() => {
    const newData = getTodo().then((result) => {
      return result;
    });
    console.log(newData);
    token && setDatas(newData);
  }, [create, id]);

이렇게 했더니 Promise {<pending>}값이 찍히긴 하지만 PromiseResult값에는 결과 값이 들어왔다!
+ 10월 2일
그렇지.. 여기서는 result 변수에 axios요청 값을 넣고 return을 해주고 있으니까 Promise가 넘어오면서 요청받은 값을 넘겨받은 거지

이 결과 값을 어떻게 사용할 수 있을까. 여기서부터 또 어렵다.
처음에는 그냥 위에 첨부한 코드대로 수정하면 값을 사용할 수 있을 거라고 생각했는데, 아니었다.

✨해결했다✨

스택오버플로우, 개인 블로그 글들을 다 뒤지며 방법을 찾으면서 async await은 Promise를 반환하고, then을 해서 결괏값을 받을 수 있다는 글을 많이 봤다.
모르는 내용은 아닌데 그래서 어떻게 활용하냐고 가 문제였다.

계속 다양한 방법으로 TodoTitle컴포넌트에서 getTodo함수의 결괏값을 콘솔로 찍어보았다.

 useEffect(() => {
    const newData = getTodo().then((result) => {
      console.log(result); // ✅ 이 코드 추가
      return result;
    });
    console.log(newData);
    token && setDatas(newData);
  }, [create, id]);

코드를 저기에 추가했더니 콘솔에 데이터가 잘 찍혔다!

.then함수 안에서 바로 콘솔을 찍으면 데이터가 잘 받아와 지는데 왜 return 값으로 newData변수에 할당한 후 newData변수를 사용하면 Promise<pending>값이 나오는 것일까. 역시나 async await은 Promise를 반환하기 때문일까? (공부가 필요한 부분 찾았다💡)
그래서 getTodo함수의 .then()안에서 바로 setDatas로 datas state를 업데이트해줬고, 밑처럼 코드를 수정했다.

// TodoTitle 컴포넌트 

 useEffect(() => {
    token &&
      getTodo().then((result) => {
        setDatas(result.data.data);
      });
  }, [create, id]);

같은 방식으로 todo detail을 받아오는 axios 요청 로직도 분리했다. :)
좀 더 깔끔하고 우아한(🦢??) 방법이 있을 것 같은데, 또 하나하나 리팩토링 하면서 고민해봐야겠다.