[TIL] 230818

Nextjs

사용 가능한 API

Server Component

• secure data
• cookie
• header
• fetch

Client Component

• useState
• useEffect
• onClick
• onChange
• useRouter
• useParams
• fetch

Server Component 내에는 Client Component가 있어도 되는데 반대는 안된다.

Server Actions

서버 컴포넌트에서도 action을 사용할 수 있게 만든 것이지만, 베타버전이기 때문에 사용하지 않는게 좋다.

Data Fetching

서버 컴포넌트에서 console로 데이터를 확인하는데 supabase에서 데이터를 변경했는데 실시간으로 반영이 되지 않았다.
서버 컴포넌트에서는 시간을 걸어서 데이터를 반영하거나(revalidate) SSR로 변경해주어야 한다.cache: 'no-store'

Meta Data

export, import로 메타데이터를 활용할 수 있다.
정적으로 사용할 때에는 선언하여 사용하면 되고
정적이지 않을 경우 함수로 선언하여 return문으로 사용할 수 있다.

Next와 supabase

• 무한스크롤 관련
  https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion

• 13ver에서 데이터 가져오기 및 캐싱
  https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components

• App router지원 내용
  https://supabase.com/blog/using-supabase-with-vercel#nextjs-13-app-router-support

Zustand

redux와 유사한 문법을 가진 상태관리 라이브러리

사용법

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore((state) => state)
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Store 생성 및 state 업데이트

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

create로 생성하고 set으로 해당 state를 업데이트

다른 컴포넌트에서 사용하기

const count = useStore((state) => state.count)
const inc = useStore((state) => state.inc)

hook으로 가져와서 사용하기

TypeScript

import { create } from 'zustand'

type Store = {
  count: number
  inc: () => void
}

const useStore = create<Store>()((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

공식문서에서 상펴보면 제네릭으로 타입을 관리한다.

렌더링이 어떤 방식으로 되는지, 어떻게 데이터를 가져오면 어떤 방식으로 캐싱이되고 렌더링이 되는지 코드를 더 작성해보면서 적응하는 시간을 가지면 필요한 부분만 문서를 보면서 사용할 수 있을 것 같다. 부딪혀보면서 새로운 기술을 익히는 방법을 터득해보자!