들어가기 앞서
이 포스팅은 DOKBARO를 개발하면서 경험한 것을 기반으로 제작하였습니다.
DOKBARO란 ?
자기계발과 성장을 위해 독서와 스터디를 활용하는 개발자들을 위한 퀴즈 학습 플랫폼, DOKBARO입니다.
개발 서적을 즐겨 읽지만, 매번 내용을 제대로 이해했는지 확인하기 어렵지 않으셨나요? 혹은 이해 부족으로 인해 독서 스터디가 소수만 적극적으로 참여하는 형태로 변질되는 경험을 하셨을지도 모릅니다.
그래서, DOKBARO는
📚 퀴즈 출제 및 풀이 기능으로 도서 내용을 재미있고 효과적으로 이해하도록 도와드려요.
💡 스터디 리포트 기능으로 스터디원들이 책에 대해 자유롭게 의견을 나누고, 서로의 학습 현황을 확인할 수 있어요.
DOKBARO와 함께라면 도서 이해도를 높이고, 스터디 활동을 보다 풍성하고 활발하게 만들어 이상적인 독서 환경을 경험하실 수 있습니다. ✌️
현재 베타 오픈중이니 아래 링크를 통해 이용해보실 수 있어요!
https://dokbaro.com
DOKBARO 에서는 React 상태관리 라이브러리로 Jotai를 사용하고 있다.
고민의 시작....
프로젝트를 본격적으로 시작하기 전 팀원께서 이런 고민거리를 던져주셨다.
Zustand와 Jotai 중 고민인데 뭐가 좋을까요?
Zustand는 Flux패턴이면서 tanstack query와 조합이 좋다고 하고
Jotai는 우리가 디렉토리 관리하는 방식인 atomic패턴으로 관리된다고 하네요..
나: 그러게요..
Jotai 처음들어 보는데.. 누가쓰지..?
조사를 위해 공식문서에 들어가보니, 무려 Meta, Adobe에서도 사용하고 있었다. 국내 기업에선 카카오 스타일 에서 사용중인듯 하다. 토스에서도 Recoil에서 Jotai로 마이그레이션하는 블로그를 작성하였다. (마이그레이션 코드를 작성해서 100초만에 900개의 파일을 작업했다니 엄청나다..)
Jotai 특징
Jotai는 이러한 특징을 갖고있다.
- TypeScript oriented
- bottom-up의 atomic 접근법 (모듈화?)
- useState와 유사한 사용법 (익숙함)
- recoil과 유사함 (key선언을 하지 않아도 되고, 여러면에서 더 편리하다고 함)
기타 특징은 문서에서 확인부탁!
우리 팀은 디자이너가 컴포넌트 단위부터 디자인 해주시고 있다. 개발팀 구성원들의 성향도 부품부터 만들어서 가져다 쓰는 방식으로 개발하는걸 좋아하여 bottom-up방식으로 개발하고 있었다. 여기서 jotai 플러스 100점~
게다가 우리는 Typescript를 사용중이다!!! 간단히 문서를 훑어봤을 때 사용방법 또한 useState와 비슷하여 러닝커브도 크기 않을거라고 생각했다. 논의끝에 Jotai를 사용하게 되었음! 더 찾아보니 상태를 조합하여 더 큰 상태를 만드는 모듈방식의 개발이 가능하다고 한다. 이 점도 맘에듦..
Jotai 간단 사용법
atom 생성, useAtom
import React from 'react';
import { atom, useAtom } from 'jotai';
const inputAtom = atom(''); // atom 상태를 정의
const App: React.FC = () => {
const [inputValue, setInputValue] = useAtom(inputAtom);
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
/>
<p>입력한 값: {inputValue}</p>
</div>
);
};
export default App;
DOKBARO에서 Jotai를 사용해 개발하다보니, useState를 다 제거해버리고 useAtom만 써도 되는거 아닌가.. 싶은 부분이 있었다. 위의 예제를 보고도 그런 생각이 드셨을수도 있다. DOKBARO에서는 특히 퀴즈 작성하기 부분이 그랬는데, 퀴즈 작성을 여러 화면에서 나누어 작성해야 하기 때문에 전역상태를 많이 사용하는 부분이 있었다.
useSetAtom, useAtomValue
useSetAtom은 상태를 변경만, useAtomValue는 상태를 읽기만 할 수있다.
const value = useAtomValue(atom1); // value의 값을 읽기만 가능
const setValue = useSetAtom(atom1); // setValue를 통해 상태값 set만 가능atom을 조합해보자
get, set문법을 통해 다른 atom의 값을 가져와 다른 atom값을 관리 할 수 있다.
무슨말이냐면 한 군데에서 여러 atom의 값을 관리 할 수 있다는 말이다.
get
다른 atom의 값을 읽어온다.
const derivedAtom = atom((get) => {
return get(myAtom) + 1; // myAtom의 현재 값을 읽어 1을 더한다.
});set
다른 atom의 값을 변경한다.
const myAtom = atom(0);
const updateAtom = atom(
null,
(get, set, newValue) => {
set(myAtom, newValue); // myAtom의 값을 newValue로 설정
}
);
atom의 인자에는 뭐가 들어가지?
첫번재 인자는 초기값이 들어간다.
두번째 인자는 업데이트 함수가 들어간다.이 함수는 atom의 값을 업데이트하는 데 사용된다. 이 함수는 또 세 개의 인자가 들어가는데, 아래와 같다.
get : 현재 atom의 값을 읽기 위한 함수
set : atom의 값을 업데이트하기 위한 함
newValue : 업데이트할 새로운 값을 나타내며, 이 인자는 사용자가 set을 호출할 때 전달된다.
다음 게시글에서는 atom의 조합을 사용해서 DOKBARO에서 상태관리를 어떻게 간결하게 개선했는지 작성해보려 한다. 아마도..
