[Jotai] 간단한 Jotai 실습

 

리액트 리덕스와 기능이 같은 상태 관리 라이브러리이다.

 

---

사용 이유

1. 간편한 구조: Jotai는 리덕스와 같은 복잡한 구조 없이 간단하게 상태를 관리할 수 있도록 도와줍니다. Atom과 useAtom 함수만으로도 간단한 상태 관리가 가능합니다.
2. React Hook과 통합: Jotai는 리액트의 Hook 개념을 활용하여 상태 관리를 하기 때문에, 리액트 앱과 자연스럽게 통합됩니다.
3. 성능 개선: Jotai는 상태 업데이트가 필요한 컴포넌트만 리렌더링되도록 최적화되어 있습니다. 이를 통해 성능을 향상시킬 수 있습니다.
4. 코드 간결성: Jotai는 최소한의 코드로도 상태 관리를 처리할 수 있기 때문에, 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.

Jotai는 복잡한 상태 관리 라이브러리보다 더 간단하고 효율적인 상태 관리를 제공하므로, 작은 규모부터 중간 규모의 리액트 앱에서 유용하게 사용될 수 있습니다.

 

---

라이브러리 설치

 

npm install jotai

yarn add jotai

 

 

---

 

간단한 카운터 사용 예제

import React from 'react';
import { atom, useAtom } from 'jotai';

// Jotai atom을 생성합니다.
const countAtom = atom(0);

function App() {
  // atom을 구독하여 상태와 업데이트 함수를 가져옵니다.
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1>Counter App with Jotai</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment</button>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>Decrement</button>
    </div>
  );
}

export default App;

- 여기선 한 파일에서 사용됐지만, 다른 파일에서 값을 사용하며 기능을 잘 활용해야 한다.