React 상태 관리 라이브러리 "Jotai"의 Provider-less mode로 손쉽게 코딩

Jotai 사용하고 있습니까?

v0.15.0부터 Provider-less mode가 들어갔습니다. 사소한 차이입니다만, 보다 간편하게 되었습니다. 간단하게 소개합니다.

codesandbox 열기

htps : // Rea ct. 네 w을 엽니다.

jotai 설치

왼쪽 하단의 Add Dependency에 jotai를 입력하여 설치합니다.

jotai에서 import

atom 및 useAtom를 가져옵니다.

atom 정의

atom를 사용하여 하나의 primative atom을 정의합니다. 인수에 초기값을 설정합니다.

const countAtom = atom(0);

이번은 간단하기 때문에 동일 파일입니다만, 통상은 atom 정의는 다른 파일로 하는 것이 관리하기 쉽습니다.

구성 요소 만들기

정의한 atom을 사용하여 구성 요소를 만듭니다.

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      {count} <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
};

useAtom의 반환값은 useState와 동등하게 사용할 수 있습니다.

앱에 통합

마지막으로 만든 구성 요소를 앱에 통합합니다.



카운터가 움직였습니다.

작성한 codesandbox는 여기입니다.

결론

아주 간단한 예였지만, useState와 같이 사용할 수 있는 useAtom의 사용성을 나타낼 수 있었습니까? jotai는 파생 atom도 만들 수 있으므로 꼭 그 쪽도 시험해 주세요.

그러고 보니 데모 사이트 URL이 새로워졌습니다.
h tps : // 조이--그래도. pm d. rs

React 개발자를 위한 온라인 살롱 "React Fan" 소개

마지막으로 내가 주최하는 'React Fan'이라는 커뮤니티를 알려드리겠습니다. 텍스트 채팅으로 커뮤니케이션할 수 있는 Slack 작업 공간을 제공합니다. Slack에의 참가는 무료이므로, 흥미가 있는 분은 꼭 참가해 주세요. 자세한 내용은 아래 페이지를 참조하십시오.

React 개발자를 위한 온라인 살롱 "React Fan" 입구 페이지

Slack에 대한 초대 링크도 위 페이지에 있습니다.