https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString
const d = new Date(0);
console.log(d.toString()); // "Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)"
console.log(d.toDateString()); // "Thu Jan 01 1970"
Date 인스턴스는 특정 시점을 참조합니다. toDateString()은 날짜를 현지 시간대로 해석하고 날짜 부분을 영어로 형식에 맞춰 출력합니다. 이 함수는 항상 공백으로 구분된 다음 형식을 사용합니다.
요일 이름의 처음 세 글자
월 이름의 첫 세 글자
필요한 경우 왼쪽에 0을 추가한 두 자리 숫자의 월별 요일
4자리 연도(최소), 필요한 경우 왼쪽에 0을 추가합니다. 음수 기호를 사용할 수 있습니다.
예를 들어 "Thu Jan 01 1970"처럼 말이죠.
시간 부분만 가져오려면 toTimeString()을 사용하시기 바랍니다.
날짜와 시간을 모두 가져오려면 toString()를 사용하시기 바랍니다.
날짜를 현지 표준 시간대 대신 UTC로 해석하려면 toUTCString()를 사용하시기 바랍니다.
보다 사용자 친화적인 형식(예: 현지화)으로 날짜 형식을 맞추려면 toUTCString()를 사용합니다.
https://velog.io/@bie38/React-React-query
https://velog.io/@exceed96/React-query-useQuery%EC%9D%98-refetch%EC%98%B5%EC%85%98
훅 선언 및 매개변수
javascript
코드 복사
export const useGetArticlesQuery = (
tab: number,
selectTag: string,
page: number
) => {
useGetArticlesQuery라는 이름의 커스텀 훅을 선언합니다.
이 훅은 tab (숫자), selectTag (문자열), page (숫자)를 매개변수로 받습니다.
export 키워드는 이 훅을 다른 모듈에서 사용할 수 있도록 내보냅니다.
React Query 사용
javascript
코드 복사
const { data, isLoading, refetch } = useQuery(
["articles", tab, selectTag],
() => getArticles(tab, selectTag, page)
);
useQuery는 React Query 라이브러리에서 제공하는 훅으로, 데이터를 가져오는 로직을 캡슐화합니다.
첫 번째 인자는 쿼리 키로, 쿼리를 식별하는 데 사용됩니다. 배열 형태로 ["articles", tab, selectTag]를 전달하여 쿼리 키를 동적으로 생성합니다.
두 번째 인자는 데이터를 가져오는 함수입니다. 여기서는 getArticles라는 비동기 함수를 호출하여 데이터를 가져옵니다.
useQuery 훅은 data, isLoading, refetch 등의 값을 반환합니다.
data: 가져온 데이터
isLoading: 데이터를 가져오는 동안의 로딩 상태
refetch: 데이터를 다시 가져오는 함수
useEffect 훅 사용
javascript
코드 복사
useEffect(() => {
refetch();
}, [page]);
useEffect 훅은 사이드 이펙트를 수행하기 위해 사용됩니다.
여기서는 page 값이 변경될 때마다 refetch 함수를 호출하여 데이터를 다시 가져옵니다.
refetch 함수는 useQuery 훅에서 반환된 함수로, 데이터를 다시 가져오는 역할을 합니다.
훅 반환 값
javascript
코드 복사
return {
data,
isLoading,
refetch,
};
이 훅은 data, isLoading, refetch 값을 객체 형태로 반환합니다.
훅을 사용하는 컴포넌트는 이 반환 값을 통해 데이터, 로딩 상태, 데이터 다시 가져오기 기능을 사용할 수 있습니다.
queryKey와
queryFn를 생략할 수 있어...?