props 정리

const fetchNews = async () => {

  try {
    const res = await axios.get(`${import.meta.env.VITE_API}/news/view`, {
      params: { page: page.value, itemsPerPage: 6 },
    });
    newsDetail.value = res.data.data;
    total.value = res.data.total;
    console.log(res.data);
  } catch (error) {
    console.error(error);
  }
}
//catch는 생략

아래와 같이 바꿀수잇당

const fetchNews = async () => {
  try {
    const res = await getNews({ page: page.value, itemsPerPage: 6 });

    newsDetail.value = res.data.data;
    total.value = res.data.total;
    console.log(res.data);
  } catch (error) {
    console.error(error);
  }
}

제일 먼저 위 함수가 실행되면, getNews함수를 실행 하게 되는데,

//const props = { page: page.value, itemsPerPage: 6 };
export const getNews = async (props) => {
  console.log(0);
  try {
    const res = await news.get('/view', {
      params: {
        page: props.page,
        itemPerPage: props.itemPerPage,
      },
 //const res = await news.get('/view', { params })이렇게도 가능
    });

    return res.data;
  } catch (error) {
    throw error;
  }
};

getNews의 props를 받아서 해당 props를 params에 넣어준다.
이럴때 fetchNews에서 실행하는 getNews의 인자는 아래와 같을것이다.

const res = await getNews(params :{ page: page.value, itemsPerPage: 6 });

export const getNews = async (params) => {
  console.log(0);
  try {
    const res = await news.get('/view', {
     parmas
    });

이렇게 간단하게도 작성 가능하지만, 좀 더 풀어서 써보는것이 내기준에서는 좀 더 도움이 될거같다

//getNess([page.value, 6])로 넘어올때

const props = [page.value, 6]
export const getNews = async (props) => {
  try {
    const res = await news.get('/view', {
      params: {
      page: props[0],
      itemPerPage: props[1]
      },
    });

    return res.data;
  } catch (error) {
    throw error;
  }
};

//getNess({ value: page.value, size: 6 })
export const getNews = async (props) => {
  try {
    const res = await news.get('/view', {
      params: {
      page: props.value,
      itemPerPage: itemPerPage
      },
    });

    return res.data;
  } catch (error) {
    throw error;
  }
};

//getNess( page.value, 6)로 넘어올 때 => 객체나 배열로 감싸여있지 않아서 2개로 나눠짐
export const getNews = async (page, itemPerPage) => {
  try {
    const res = await news.get('/view', {
      params: {
      page: page,
      itemPerPage: itemPerPage
      },
    });

    return res.data;
  } catch (error) {
    throw error;
  }
};

or

export const getNews = async (mango1, mango2) => {
  try {
    const res = await news.get('/view', {
      params: {
      page: mango1,
      itemPerPage: mango2
      },
    });

    return res.data;
  } catch (error) {
    throw error;
  }
};

// getNews({
//      params: { page: page.value, itemsPerPage: 6 },
//    })

export const getNews = async (params) => {
  try {
    const res = await news.get('/view', params);

    return res.data;
  } catch (error) {
    throw error;
  }
};