React

react-helmet-async

사용법

<HelmetProvider>
  <하위컴포넌트>
    <Helmet>
      <title>이 페이지의 타이틀을 여기에 적습니다.</title>
    </Helmet>
  </하위컴포넌트>
</HelmetProvider>

---

Zustand

State와 Action(동작 함수)을 함께 관리한다.

사용법

커스텀훅을 사용할 때 인수로 콜백함수를 전달해 성능 저하를 방지한다.

const 변수 = 훅((state) => state.상태|액션);
/* State나 Action 중 사용할 것을 반환하는 콜백함수를 훅의 매개변수로 불러온다. */

/* ------------------------------------------------------------------ */

const { 상태, 액션, ... } = 커스텀훅((state) => {
  const { 상태, ...rest액션 } = state;

  return rest액션;
};
/* 하나씩 빼지 않고, 구조 분해 할당으로 한번에 불러올 수도 있다. */

persist를 사용하면 localstorage에 저장하여 새로고침해도 유지된다.

create(persist())

---

TanStack Query

한번 불러온 데이터를 캐싱하여 사용자의 경험을 높이기 위해 사용한다.

사용법

const 변수 = new QueryClient({});  // 객체 생성
/* 인수로 사용할 기능들을 넣어준다. */

<QueryClientProvider client={변수}>  // Component를 감싼다.
  <하위컴포넌트 />
<ReactQueryDevtools />  // 개발 툴 Component
</QueryClientProvider>

---

Next.js

• index.html ➡️ layout.js
  (index.html은 Build 시 생성된다.)
• 공식 문서의 File Convention을 지켜야 한다.
• Client인지 Server인지 구분하는 것이 핵심이다.
  ➡️ Client File은 use client를 선언해야 한다.