타입스크립트에서 API 호출로 받아온 데이터의 프로퍼티(data, status...)에 접근하기

처음으로 타입스크립트를 사용하여 진행한 프로젝트에서 아래와 같은 상황처럼 api 호출을 통해 불러온 데이터의 프로퍼티(data, headers, status 등)에 접근하려고 하니 에러가 떠서 곤란했었다.😅

//post.ts (게시글 관련 api 모음)
export const getLatest = async( page: number ) => {
  try {
    const data = await axiosApi.get(`/posts?page=${page}`);
    return data;
  }
  catch(e) {
    console.log(e);
  }
};

//Board.tsx
const getPosts = async(): Promise<void> => {
	const postsData = await getLatest(currentPage);
	console.log(postsData.data); //오류 발생 'data' is possibly 'undefined'
};

바로 postsData가 AxiosResponse<any, any> | undefined 이기 때문에 undefined일 수도 있으며 undefined에는 data가 존재하지 않기 때문에 postsData의 data에 접근할 수가 없다는 것...

이런 에러는 처음부터 axios호출을 할 때 구조 분해 할당으로 필요한 프로퍼티를 가져오면 해결할 수 있다.

//post.ts
export const getLatest = async( page: number ) => {
  try {
    const { data } = await axiosApi.get(`/posts?page=${page}`);//구조 분해 할당으로 리스폰스 객체의 data프로퍼티만 가져오기
    return data;
  }
  catch(e) {
    console.log(e);
  }
};

//Board.tsx
const getPosts = async(): Promise<void> => {
	const postsData = await getLatest(currentPage); //이제 postsData는 리스폰스의 data가 된다.
	console.log(postsData);
};