Published on

Context API vs Recoil vs Jotai

Authors
  • avatar
    Name
    Hyo814
    Twitter

📝 새로 배운 개념

Props Drilling

  • 정의: React에서 상위 컴포넌트의 props를 하위 컴포넌트로 전달하는 프로세스.
  • 문제점:
    • 컴포넌트 계층이 깊어질수록 유지보수가 어려워지고 가독성이 저하됨.
    • 불필요한 props가 중첩 전달될 수 있음.
  • 예제 코드:
function ParentComponent(props) {
  return <ChildComponent data={props.data} />
}

function ChildComponent(props) {
  return <GrandChildComponent data={props.data} />
}

function GrandChildComponent(props) {
  return <div>{props.data}</div>
}

🛠️ Context API

  • 정의: React에서 컴포넌트 트리 전반에 데이터를 효율적으로 공유할 수 있는 공식 API.
  • 사용법:
    1. React.createContext()로 Context 생성.
    2. Provider로 데이터를 제공.
    3. useContext()로 데이터 사용.
  • 코드 예제:
import React, { useContext, useState } from 'react'

const ThemeContext = React.createContext('light')

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar changeTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
    </ThemeContext.Provider>
  )
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton changeTheme={props.changeTheme} />
    </div>
  )
}

function ThemedButton(props) {
  const theme = useContext(ThemeContext)
  return (
    <button
      style={{
        background: theme === 'light' ? 'white' : 'black',
        color: theme === 'light' ? 'black' : 'white',
      }}
      onClick={props.changeTheme}
    >
      Change Theme
    </button>
  )
}

🌟 Recoil

  • 정의: React 앱에서 상태 관리를 위한 강력한 라이브러리. 복잡한 상태와 비동기 상태를 관리 가능.
  • 주요 개념:
    • Atoms: 상태의 기본 단위, 업데이트와 구독 가능.
    • Selectors: 파생된 상태를 생성하는 함수.
  • 코드 예제:
import { atom, useRecoilState } from 'recoil'

const textState = atom({
  key: 'textState',
  default: '',
})

function TextInput() {
  const [text, setText] = useRecoilState(textState)
  return <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
}

🌱 Jotai

  • 정의: 간결하고 효율적인 상태 관리 라이브러리. 원자(atom) 중심으로 설계.
  • 주요 개념:
    • Atoms: 상태의 기본 단위, 읽기 및 쓰기가 가능.
  • 코드 예제:
import { atom, useAtom } from 'jotai'

const countAtom = atom(0)

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

📊 비교

기능Context APIJotaiRecoil
공식 지원React 공식커뮤니티 지원커뮤니티 지원
학습 곡선낮음보통보통
보일러플레이트낮음낮음보통
성능좋음 (메모이제이션 필요)매우 좋음매우 좋음
복잡성 처리기본 상태 관리원자적 상태 관리복잡한 상태 그래프 관리
셀렉터없음있음있음
비동기 상태없음있음 (아톰 사용)있음 (내장 지원)
개발 도구React DevToolsJotai DevToolsRecoil DevTools
크기매우 작음작음보통

🦋 활용 사례

  • Context API:
    • 전역 데이터 관리 (테마, 로컬라이제이션, 사용자 세션).
    • 중소형 프로젝트에 적합.
  • Recoil:
    • 대규모 애플리케이션에서 복잡한 상태와 비동기 로직 관리.
    • 컴포넌트 간 의존성이 높은 상태 처리.
  • Jotai:
    • 초기 단계 또는 간단한 상태 관리.
    • 간결한 코드로 빠른 상태 관리 구현.

🔗 레퍼런스