Date에 toLocaleDateString를 사용하면 날짜 데이터를 언어별로 표현한 문자열로 반환할 수 있다.

react의 <Outlet>

• 중첩 렌더링. 쉽게 말해서 다른 페이지의 내용을 가져와서 넣을 수 있다.(로 저는 이해했습니다)
• Outlet에 속성으로 context를 주면 해당 페이지에 데이터를 전달할 수 있다.
• context로 전달한 데이터는 페이지에서 useOutletContext 로 꺼내올 수 있다!

react-query

• react-query를 사용해서 포스트 요청을 하거나 삭제 요청을 했을 때, 화면에 보여주는 데이터에도 변화를 주어야 한다. 이 때 queryClient의 invalidateQueries 메서드를 사용해서 query키를 날리면 된다. 즉, mutation 함수가 성공할 때, unique key로 맵핑된 get 함수를 invalidateQueries 에 넣어주면 된다.

const mutation = useMutation(postTodo, {
 onSuccess: () => {
 // postTodo가 성공하면 todos로 맵핑된 useQuery api 함수를 실행합니다.
 queryClient.invalidateQueries("todos");
 }
});

• useQuery는 비동기로 작동한다. 그래서 한 컴포넌트에 여러 개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아니라, 두 개의 useQuery가 동시에 실행된다! 그래서 만약 useQuery를 비동기로 여러 개 실행하는 경우에는 useQuery 대신 useQueries 를 사용하자.

타입스크립트

• type.d.ts 파일 안에 타입들을 작성하면 컴포넌트에서 import 할 필요 없이 타입을 그냥 사용할 수 있다. (d의 의미는 declare)

// type.d.ts
declare interface TodoType {
 id: number;
 isDone: boolean;
 title: string;
 content: string;
}

• 모든 것에 타입을 줄 필요는 없다. 타입 추론이 가능한 것은 타입을 주지 말고 그냥 넘어가자! 생산성 저하됨.
• props의 타입을 작명할 땐 @@Props 로 짓자. (컨벤션)