[TIL] 내일배움캠프 React 과정 2023.02.16

Today I Learned

• 2주차 기술 멘토링 노트 작성
• 마이페이지 닉네임, 프로필 사진 변경 기능 구현

 

---

2주차 기술 멘토링 노트 작성 링크

https://teamsparta.notion.site/2-b2224420ad11483c9b795df9e278c153

 

---

Next.js 구동 순서

Next의 구동순서는 _app.js와 _document.js가 제일 처음 실행되며, 두 파일 모두 pages 폴더 안에 있어야 한다.

 

1. _app.js

• 최초로 실행되는 파일로, Client에서 띄어지는 전체 컴포넌트의 레이아웃.
• 공통 레이아웃으로 최초에 실행되어 내부에 들어갈 컴포넌트들을 실행한다.

2. _document.js

• 그다음에 _document.js가 실행되는데, 이는 _app.js에서 구성한 HTML이 어떤 형태로 들어갈지 구성해 주는 것.

출처 https://kjhg478.tistory.com/25

 

 

Next.js에서 로그인 여부에 따라 페이지 접근 차단하기 (middleware)

아직 기능 구현은 안 했지만 참고하기 좋은 링크들을 기록해 둔다!

 

https://nextjs.org/docs/advanced-features/middleware

https://velog.io/@sbinha/@sbinha/next.js-에서-middleware.ts의-역할과-최근-활용-예시

https://velog.io/@sssssssssy/NextJs-URL-직접-접근-막기#server코드

 

 

React Query 윈도우 focus 시 refetch  설정 변경하기

// Disabling Globally
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // default: true
    },
  },
})

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

• If a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option:

페이지에 focus가 갈 때마다 쿼리를 계속해서 불러오는 게 불필요한 부분 같아서 refetchOnWindowFocus 설정을 false로 변경했다.

 

참고

https://velog.io/@blackeichi/react-query-focus시-refetch방지하기

https://psychomildang.tistory.com/67

https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching

 

 

특정 조건에서만 쿼리 실행하기

// Users 데이터 불러오기
  const { data: users, isLoading }: any = useQuery('users', getUsersList, {
    enabled: !!session, // session이 ture인 경우에만 useQuery를 실행함
  });

 

 

유저의 데이터가 들어오고 난 다음에 useQuery를 실행하고 싶어서 enabled 속성을 추가했다.

 

Lazy Queries

The enabled option can not only be used to permanently disable a query, but also to enable / disable it at a later time. A good example would be a filter form where you only want to fire off the first request once the user has entered a filter value:

function Todos() {
  const [filter, setFilter] = React.useState('')

  const { data } = useQuery({
      queryKey: ['todos', filter],
      queryFn: () => fetchTodos(filter),
      // ⬇️ disabled as long as the filter is empty
      enabled: !!filter
  })

  return (
      <div>
        // 🚀 applying the filter will enable and execute the query
        <FiltersForm onApply={setFilter} />
        {data && <TodosTable data={data}} />
      </div>
  )
}

 

참고

https://velog.io/@haleyjun/useQueries-종속쿼리-조건-만족-후-쿼리-실행시키기

https://tanstack.com/query/v4/docs/react/guides/disabling-queries

 

---

회고

오늘도 끝나지 않는 undefined 지옥 경험... 결국엔 해결했지만 너무 코드가 지저분해진 거 같다.