[React] 좋아요 기능 에러

❌ 에러 상황

좋아요 api 함수를 만들고, 여기서 오는 true와 false 값에 따라 좋아요 표시를 바꿔주려고 한다.
하지만 함수를 실행시켰을 때 api 요청은 가지만 return 값이 돌아오지 않았다.

await axios.post(`/post/${postId}/like`,{},{
        headers:{Authorization:`Bearer ${accessToken}`}
    }).then(response=>{
        if(response.status===201 | response.status===204){
            return true
        }
        return false
    })

✅ 에러 원인

현재 내가 만든 함수는 비동기로 좋아요를 추가하는 POST 요청을 보내고, 그에 대한 응답에 따라 true 또는 false를 반환한다. 그러나 현재 코드에서 return true와 return false는 axios.post()의 콜백 내부에서 일어나기 때문에 postLike 함수 자체는 언제나 undefined를 반환한다는 것이다.

axios.post()는 Promise를 반환하므로 await를 사용하고 있지만, .then() 블록 내부에서의 반환은 해당 then의 콜백 함수에만 영향을 미치고, postLike 함수의 반환값에 영향을 주지 않는다!!

✅ 해결 방법

해결 방법 중 하나는 axios.post()의 응답을 직접 반환해주면 된다.

const postLike = async (postId) => {
    const accessToken = localStorage.getItem("access");

    try {
        const response = await axios.post(`/post/${postId}/like`, {}, {
            headers: { Authorization: `Bearer ${accessToken}` }
        });

        if (response.status === 201 || response.status === 204) {
            return true;
        }

        return false;
    } catch (error) {
        return false; // 에러 처리를 위해 false 반환
    }
}