fix/FE-5879 코드블록 테스트

안녕하세요. 화해팀 프론트엔드 플랫폼 박제훈입니다. jotai

최근 플랫폼 내에서 상태 관리에 대한 기술 흐름 파악 및 팀 내 표준화를 위해서 논의를 진행하려 하고 있었고 관련해서 조사하던 내용들을 글로 정리해보려 합니다.

매번 해왔던 고민

저희 프론트엔드 플랫폼은 UI 구현을 위한 라이브러리로 리액트를 메인 기술 구조로 채택하여 사용하고 있습니다. 그런데 새로운 프로젝트가 시작되면 리액트와 함께 구현할 기반 기술들을 선택할 때 자주 논의되었던 주제가 상태 관리였습니다. 과거엔 상태 관리를 위해 당연하듯 Redux를 고려했었는데 리액트 v16.8의 hook의 등장 이후로 많은 선택지가 생겨나게 되었고 이에 따라 저희 역시 새로운 시도에 대한 고민을 해왔습니다. 이럴 때마다 논의의 내용은 항상 비슷했었습니다.

• 요즘의 상태 관리 라이브러리들은 어떠한 변화를 겪고 있고 어떤 라이브러리가 선호될까?
• 상태 관리 라이브러리를 사용하지 않고 Context 만으로 충분히 관리될 규모일까?
• 대부분의 상태 관리를 해야 하는 것들이 response 데이터라면 swr이나 react-query만으로 구현할 수도 있지 않을까?

위와 같은 내용으로 몇번의 논의 이후 플랫폼 내 스터디를 통해서 리액트 상태 관리에 대한 기반 지식들을 되짚고 갈 필요가 있다고 생각되었고, 플랫폼 내부에서 나눠서 여러 상태 관리 라이브러리에 대한 조사를 시작하고 각자 세미나를 진행하기로 하였습니다. 저는 자료를 조사해가던 중 Kent C. Dodds의 블로그 글을 보다가 Jotai라는 상태 관리를 언급한 문장을 보았습니다.

💡 recoil과 jotai는 매우 유사하며 같은 문제를 해결한다. 하지만 내 경험상 jotai를 선호한다. (Recoil and jotai are very similar (and solve the same types of problems). But based on my (limited) experience with them, I prefer jotai.)

20년 7월 즈음 작성된 글이어서 약 1년 정도 지난 시점에선 두 라이브러리에 변화가 많이 있었겠지만, jotai를 특별히 언급한 부분에 흥미를 느끼게 되었습니다. 이후 jotai의 철학과 컨셉, 그리고 코드를 훑어보면서 조사한 내용들을 플랫폼 인원들과 공유하면 좋겠다는 생각으로 글을 시작하게 되었습니다.

re-render, re-render

jotai의 컨셉 문서를 읽어보면 시작은 Context의 re-rendering 문제에서 출발한 것 같다는 생각이 들었습니다. Context를 활용해 상태 관리를 할 때 발생하는 대표적인 문제는 아래와 같은 케이스입니다.

const reducer = (state: FruitState, action: Action): FruitState => { switch (action.type) { case UPDATE_TITLE: case UPDATE_COLOR: return { ...state, [action.payload.key]: action.payload.value }; default: throw new Error("error"); } }; const Header = () => { const { dispatch } = useContext(FruitsContext); const handleClickTitle = () => { dispatch({ type: UPDATE_TITLE, payload: { key: "title", value: getRandomFruit() }, }); }; const handleClickColor = () => { dispatch({ type: UPDATE_COLOR, payload: { key: "color", value: getRandomColor() }, }); }; return ( <HeaderWrapper> <Button onClick={handleClickTitle}>change title</Button> <Button onClick={handleClickColor}>change color</Button> </HeaderWrapper> ); }; const Title = () => { const { fruitData } = useContext(FruitsContext); return <h2>{fruitData.title}</h2>; }; const Color = () => { const { fruitData } = useContext(FruitsContext); return <ColorBox style={{ backgroundColor: fruitData.color }} />; }; export const ContextSample = () => { const [fruitData, dispatch] = useReducer(reducer, { title: getRandomFruit(), color: getRandomColor(), }); return ( <Wrapper> <FruitsContext.Provider value={{ fruitData, dispatch }}> <Header /> <div> <Title /> <Color /> </div> </FruitsContext.Provider> </Wrapper> ); };

위 코드는 일반적으로 Context를 활용한 상태 관리의 예시가 될 수 있다고 생각되어 작성해보았습니다.

마무리

jotai라는 상태 관리 라이브러리를 찾아보면서 이 오픈소스는 왜 만들어졌는지, 무엇을 신경 썼는지를 여행 다녀온 느낌으로 즐겁게 찾아보았습니다. 상태 관리는 요즘 많이 관심을 갖고 있던 주제였는데 본격적으로 찾아보면서 다시 한번 미진하게 공부했던 자신을 발견하며 반성했고 이 글도 즐겁게 작성했습니다. 덤으로 jotai maintainer의 팬이 되어버렸습니다.

react-query, Redux, XState 등과 같이 확장하여 사용 가능해서 큰 규모의 프로젝트에서도 충분히 활용할 수 있다는 생각이 들었습니다. 첫 메이저 버전 release가 지난 6월 15일 배포되었는데, 앞으로 관심 있게 지켜볼 예정이고 후속 포스트가 jotai를 사용해본 경험이나 다른 상태 관리 라이브러리의 비교 글이었으면 좋겠다는 생각을 하며 마무리합니다.

✅ 제훈님과 함께한 개발팀 프론트엔드 플랫폼의 인터뷰도 확인해보세요!