짧은코딩

loading.tsx와 error.tsx loading.tsx, error.tsx 파일을 만들어두면 로딩 중에는 loading.tsx가 보이고, 에러가 발생하면 error.tsx가 보이게 할 수 있다. React의 Suspense와 error boundary를 이용하여 구현할 수 있다. Next의 Loading UI and Streaming 공식 문서 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI and Streaming | Next.js Built on top of Suspense, Loading UI allows you to create a fallback ..

useFormState와 useFormStatus 로그인이나 회원가입 같은 부분에서 Form을 통해 처리를 하곤 한다. 이때 아이디나 비밀번호가 비어있으면 에러 메시지를 알려줘야 한다. 그럴 때 useFormState, useFormStatus를 사용하면 편하다. 하지만 이 기능은 아직 실험적인 기능이긴 하다. useFormState https://react.dev/reference/react-dom/hooks/useFormState useFormState – React The library for web and native user interfaces react.dev -예시 코드 import { useFormState } from "react-dom"; async function increment(p..

useSelectedLayoutSegment useSelectedLayoutSegment는 ActiveLink를 만들 때 유용한 hooks이다. next에 내장되어 있는 기능이다. -useSelectedLayoutSegment import {useSelectedLayoutSegment} from "next/navigation"; export default function NavMenu() { const segment = useSelectedLayoutSegment(); console.log(segment); return ; } 만약 "compose/tweet" 주소에 있으면, segment는 "compose"가 나온다. 즉, useSelectedLayoutSegment는 최상위 부모 경로만 나온다. -u..

만들려는 기능 모달을 띄웠는데, 이전 페이지가 유지되고 주소가 바뀐다. 로그인 버튼을 누르면 "/login"으로 갔다가 "/i/flow/login"으로 리다이렉팅 된다. 패러렐 라우트와 인터셉터 라우트를 이용해서 구현한다. 패러렐 라우트 Parellel은 병렬이라는 의미를 가지고 있다. 즉, Parallel Route는 병렬 라우트로 해석할 수 있고, 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다. 패러렐 라우트는 뒤에 화면이 남아있으면서 모달을 띄우고 주소를 변경할 수 있는 기능이다. 폴더 구조 app/(beforeLogin)/layout.tsx import {ReactNode} from "react"; import styles from '@/..

app router app router는 기존에 있던 page router의 문제점들을 해결한 새로운 폴더 구조이다. 아직 Next에서 page router를 지원하긴 하지만 신규 기능은 app router에만 적용될 것이다. 그렇기에 장기적으로 보면 app router에 대해 잘 이해할 필요가 있다. 파일 생성 npx create-next-app@lastst 폴더 구조 public public 폴더에는 주로 누구나 접근 가능한 사진들을 저장한다. 만약 특정한 조건을 가진 사람만 접근이 가능해야 하면 다른 곳에 저장해야 한다. src/app app 폴더 안에는 페이지를 설정하는 파일들이 들어간다. 페이지 외에 파일이 필요하면 다른 폴더를 만들어서 작성하면 된다. -layout.tsx layout.tsx는..

리페칭을 할 때 중요하게 봐야 되는 것은 서버가 만료 데이터를 업데이트 한다는 것이다. 창을 포커스하는 트리거를 하면 잠시 로딩 인디테이터가 나타나는데 이는 만료되었던 데이터를 가져오기 때문이다. 데이터는 시간이 지나면 자연스럽게 만료된다. stale 쿼리는 어떤 조건 하에서 자동적으로 다시 가져오기가 된다. 새로운 쿼리가 많아지거나 그 쿼리가 처음 호출, 쿼리를 사용하는 컴포넌트 증가, 트리거, 네트워크가 다시 연결되면 리페칭이 일어난다. 그리고 리페칭 간격이 지난 경우에도 리페칭이 다시 일어나는데 이 경우 간격을 둬서 서버를 폴링하고 사용자가 딱히 무엇을 하지 않아도 데이터가 리페칭 된다. 리페칭은 전역 혹은 특정 쿼리로 할 수 있다. refetchOnMount, refetchOnWindowFocus..

useQuery의 select 옵션을 사용하면 쿼리 함수가 반환하는 데이터를 반환할 수 있다. React Query는 불필요한 연산을 줄이기 위해 memoization을 하여 최적화를 한다. 이때 select 함수를 사용하는데 select 함수는 데이터와 함수가 모두 변경되었을 때만 실행되고삼항 연산자로 비교한다. 검색한 데이터와 동일한 데이터고 select 함수에도 변동이 없으면 select 함수는 재실행되지 않는 것이 React Query 최적화이다. 따라서 select 함수는 안정적인 함수일 필요가 있어서 익명 함수는 올 수 없다. 익명 함수를 사용하고 싶다면 useCallback를 사용하면 된다. 사용법 const selectFn = useCallback( (data) => { getAvaila..

프리페칭은 캐시에 아직 데이터가 없는 경우 미리 데이터를 채울 수 있다. prefetchQuery는 queryClient의 메서드이다. 그렇기에 useQuery와 달리 클라이언트 캐시에 추가된다. prefetchQuery는 일회성이다. queryClient를 반환하고 useQuery 클라이언트 hook을 사용한다. 방문할 사이트 예측하는 프리페칭 어떤 사이트에서 홈 화면을 거치고 나서 다른 페이지를 방문할 확률이 높다면 방문할 페이지의 데이터를 미리 프리페칭하는 것이 좋다. 이 예시에서는 홈 화면에 미리 데이터를 프리페칭하는 코드이다. -커스텀 훅 export function useTreatments(): Treatment[] { // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데..

queryClient와 에러 중앙화 기존에는 queryClient를 QueryClientProvider과 같은 파일 내에 선언해 줬다. 하지만 좀 더 큰 규모의 프로젝트에서는 위 사진처럼 queryClient.ts로 따로 빼서 선언해줬다. 이렇게 하면 에러 처리를 중앙화해줄 수 있다. -queryClient.ts // 에러처리 중앙화 function queryErrorHandler(error: unknown): void { // error is type unknown because in js, anything can be an error (e.g. throw(5)) // error이 Error 클래스의 인스턴스인지에 따라 비슷한 방식으로 이름을 정하도록 했다. const title = error inst..

리액트 쿼리에서 무한 스크롤을 구현하려면 useInfiniteQuery를 사용하면 된다. 전체 wrapper 컴포넌트로는 react-infinite-scroller 라이브러리의 InfiniteScroll를 사용하면 된다. -react-infinite-scroller의 npm 사이트 https://www.npmjs.com/package/react-infinite-scroller react-infinite-scroller Infinite scroll component for React in ES6. Latest version: 1.2.6, last published: a year ago. Start using react-infinite-scroller in your project by running `npm..