nest.js + react (jotai) 개발 [1] - jotai 에 대해..

Jotai가 뭔데?

일단 Jotai는 React 상태관리 라이브러리임.

이름이 일본어로 '상태'라는 뜻
심플하고 직관적인거 같음.

 

사용 영상

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

기본 사용법

import { atom, useAtom } from 'jotai';

const textAtom = atom('안녕하세요'); // 초기값 설정

function Component() {
  const [text, setText] = useAtom(textAtom);
  // useState랑 비슷하게 생겼지?
}

useState랑 뭐가 다른데?

처음에는 그냥 useState랑 비슷하네? 했는데 완전 다름.
제일 큰 차이점은 전역 상태 관리가 가능

예를 들어서:

• useState는 컴포넌트 안에서만 씀
• Jotai는 여러 컴포넌트에서 같은 상태 공유 가능

// atoms/themeAtom.ts
const isDarkAtom = atom(false);

// components/Header.tsx
function Header() {
  const [isDark] = useAtom(isDarkAtom);
  // 여기서 다크모드 상태 사용
}

// components/Footer.tsx
function Footer() {
  const [isDark] = useAtom(isDarkAtom);
  // 여기서도 같은 상태 사용 가능!
}

언제 써야 할까? 

모든 걸 Jotai로 하면 안 됨  중요

Jotai 쓰기 좋은 경우:

• 여러 컴포넌트에서 같이 쓰는 상태 (다크모드, 로그인 정보 등)
• 복잡한 상태 로직이 필요할 때
• props로 계속 넘기기 귀찮은 경우 (props drilling 피하기)

그냥 useState 쓰는게 나은 경우:

• 컴포넌트 안에서만 쓰는 임시 상태
• 간단한 토글이나 폼 입력값
• 모달 열고 닫기같은 UI 상태

Jotai의 더 고급 기능들 (비동기 처리, 파생 상태 등) 공부해봐야겠음.

 

 

 

---