🎨 09. 렌더링 최적화 — atom 구독을 쪼개는 기술

// 🐣 영철이 처음에 짠 구조 — 스터디 하나의 모든 정보를 하나의 객체 atom 으로
interface Study {
  id: string
  title: string
  description: string
  category: string
  likeCount: number   // 자주 바뀌는 필드
  memberCount: number // 가끔 바뀌는 필드
  tags: string[]      // 거의 안 바뀌는 필드
}
 
// 🐣 영철: "일단 다 넣어뒀어요. 편하게 쓰려고요."
const studyAtom = atom<Study>({
  id: 'study-1',
  title: 'React 심화 스터디',
  description: '리렌더링 최적화 집중 탐구',
  category: 'frontend',
  likeCount: 42,
  memberCount: 8,
  tags: ['react', 'jotai', 'typescript'],
})
 
// 모든 필드를 이 하나의 컴포넌트에서 구독
const StudyCard = () => {
  // 🐣 영철: "이렇게 하면 studyAtom 의 어떤 필드가 바뀌어도 이 컴포넌트가 리렌더됨"
  const study = useAtomValue(studyAtom)
  //                          ↑
  // likeCount 만 바뀌어도 title, description, tags 등을 표시하는 부분까지 전부 리렌더!
 
  return (
    <div>
      <h2>{study.title}</h2>         {/* likeCount 가 바뀌어도 여기도 리렌더 */}
      <p>{study.description}</p>    {/* likeCount 가 바뀌어도 여기도 리렌더 */}
      <span>❤️ {study.likeCount}</span>
      <span>👥 {study.memberCount}</span>
    </div>
  )
}

// ✅ Before / After — 컴포넌트 분리만으로 최적화
 
// ❌ Before — 하나의 큰 컴포넌트가 두 atom 을 모두 구독
// 🐣 영철: "이렇게 하면 likeCount 가 바뀔 때 title 까지 리렌더돼요"
const StudyCardBig = () => {
  const title = useAtomValue(studyTitleAtom)      // 거의 안 바뀜
  const likeCount = useAtomValue(studyLikeAtom)   // 자주 바뀜
  return (
    <div>
      <h2>{title}</h2>          {/* likeCount 변경 시 여기도 리렌더 */}
      <LikeButton count={likeCount} />
    </div>
  )
}

// ✅ After — 자주 바뀌는 부분만 별도 컴포넌트로 분리
// 🦁 영호: "title 과 likeCount 는 변경 빈도가 달라요. 쪼개는 게 맞아요."
 
const StudyTitle = () => {
  const title = useAtomValue(studyTitleAtom) // title 이 바뀔 때만 리렌더
  return <h2>{title}</h2>
}
 
const StudyLikeButton = () => {
  const [likeCount, setLikeCount] = useAtom(studyLikeAtom) // likeCount 가 바뀔 때만 리렌더
  return (
    <button onClick={() => setLikeCount((c) => c + 1)}>
      ❤️ {likeCount}
    </button>
  )
}
 
// StudyCard 는 이제 두 컴포넌트를 조립만 함 — 직접 atom 구독 없음
const StudyCard = () => (
  <div>
    <StudyTitle />
    <StudyLikeButton />
  </div>
)
// likeCount 변경 → StudyLikeButton 만 리렌더 ✅

import { selectAtom } from 'jotai/utils'
 
// 영수네 앱의 스터디 상세 atom (전체 정보)
const studyDetailAtom = atom<Study>({
  id: 'study-1',
  title: 'React 심화 스터디',
  description: '리렌더링 최적화 집중 탐구',
  likeCount: 42,
  tags: ['react', 'jotai'],
})
 
// 🦁 영호: "selectAtom 으로 title 만 구독하는 파생 atom 을 만들어요"
// title 이 바뀔 때만 구독 컴포넌트 리렌더 — likeCount 변경에는 반응 안 함
const studyTitleAtom = selectAtom(studyDetailAtom, (study) => study.title)
 
// likeCount 만 구독하는 파생 atom
const studyLikeCountAtom = selectAtom(studyDetailAtom, (study) => study.likeCount)
 
// 사용
const StudyTitle = () => {
  const title = useAtomValue(studyTitleAtom) // title 변경 시에만 리렌더
  return <h2>{title}</h2>
}
 
const StudyLikeDisplay = () => {
  const likeCount = useAtomValue(studyLikeCountAtom) // likeCount 변경 시에만 리렌더
  return <span>❤️ {likeCount}</span>
}

import { selectAtom } from 'jotai/utils'
import deepEqual from 'fast-deep-equal' // 또는 lodash.isequal
 
// 🐣 영철: "tags 배열을 선택했는데 왜 계속 리렌더돼요?"
// 🦁 영호: "배열은 매번 새 참조가 생겨요. equalityFn 을 주면 값 비교를 해요."
 
// ❌ tags 가 같은 내용이어도 참조가 바뀌면 리렌더됨
const tagsAtomBad = selectAtom(studyDetailAtom, (study) => study.tags)
 
// ✅ 깊은 비교로 실제 내용이 바뀔 때만 리렌더
const tagsAtom = selectAtom(
  studyDetailAtom,
  (study) => study.tags,
  deepEqual, // equalityFn: 값이 같으면 리렌더 스킵
)

// ⚠️ 중요: selectAtom 을 컴포넌트 렌더 함수 안에서 호출하면 무한 루프!
const Component = () => {
  // ❌ 렌더마다 새 selectAtom 호출 → 새 atom config → 새 구독 → 무한 루프
  const [title] = useAtom(selectAtom(studyDetailAtom, (s) => s.title))
}
 
// ✅ 해결책 1: 모듈 최상단에 선언 (권장)
const titleAtom = selectAtom(studyDetailAtom, (s) => s.title)
 
// ✅ 해결책 2: useMemo 로 메모이제이션
const Component = () => {
  const titleAtom = useMemo(
    () => selectAtom(studyDetailAtom, (s) => s.title),
    [] // 의존성 없으면 빈 배열
  )
  const title = useAtomValue(titleAtom)
}
 
// ✅ 해결책 3: useCallback 으로 selector 함수 안정화
const selector = useCallback((s: Study) => s.title, [])
const titleAtom = selectAtom(studyDetailAtom, selector)

npm install jotai-optics optics-ts

import { focusAtom } from 'jotai-optics'
 
interface StudyProfile {
  title: string
  description: string
  settings: {
    isPrivate: boolean
    maxMembers: number
  }
}
 
const studyProfileAtom = atom<StudyProfile>({
  title: 'React 심화 스터디',
  description: '리렌더링 최적화 집중 탐구',
  settings: {
    isPrivate: false,
    maxMembers: 10,
  },
})
 
// settings 만 읽고 쓸 수 있는 파생 atom
// 🦁 영호: "focusAtom 은 렌즈(lens)야. 특정 부분을 확대해서 읽고 쓸 수 있어요."
const settingsAtom = focusAtom(studyProfileAtom, (optic) => optic.prop('settings'))
 
// 더 깊이 들어갈 수도 있음
const isPrivateAtom = focusAtom(studyProfileAtom, (optic) =>
  optic.prop('settings').prop('isPrivate')
)
 
// 사용 예시
const StudySettings = () => {
  // isPrivate 만 구독 — title 이나 description 이 바뀌어도 리렌더 안 됨
  const [isPrivate, setIsPrivate] = useAtom(isPrivateAtom)
 
  return (
    <label>
      <input
        type="checkbox"
        checked={isPrivate}
        onChange={() => setIsPrivate((prev) => !prev)}
      />
      비공개 스터디
    </label>
  )
}

// selectAtom — 읽기 전용
const titleAtom = selectAtom(studyAtom, (s) => s.title)
const title = useAtomValue(titleAtom) // 읽기 O
// setTitle(newTitle) // ❌ 쓰기 불가
 
// focusAtom — 읽기 + 쓰기 (렌즈)
const titleAtom = focusAtom(studyAtom, (optic) => optic.prop('title'))
const [title, setTitle] = useAtom(titleAtom) // 읽기 O, 쓰기 O ✅
// setTitle('새 제목') → studyAtom 의 title 필드만 업데이트

import { atom, useAtom, useAtomValue, PrimitiveAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'
 
// 배열 atom
const studyListAtom = atom<Study[]>([
  { id: '1', title: '영철이의 React 스터디', likeCount: 42 },
  { id: '2', title: '영호 님의 아키텍처 스터디', likeCount: 100 },
  { id: '3', title: '영수 님의 백엔드 스터디', likeCount: 23 },
])
 
// splitAtom 으로 배열을 개별 item atom 배열로 변환
// 🦁 영호: "studyAtomsAtom 은 [atom<Study>, atom<Study>, atom<Study>] 를 담은 atom 이에요"
const studyAtomsAtom = splitAtom(studyListAtom)

// 각 스터디 카드가 자신의 atom 만 구독
const StudyCard = ({ studyAtom }: { studyAtom: PrimitiveAtom<Study> }) => {
  // 🦁 영호: "이 컴포넌트는 자기 studyAtom 이 바뀔 때만 리렌더돼요"
  const [study, setStudy] = useAtom(studyAtom)
 
  const handleLike = () => {
    setStudy((prev) => ({ ...prev, likeCount: prev.likeCount + 1 }))
    // studyListAtom 의 해당 항목만 업데이트 — 나머지 카드는 리렌더 안 됨!
  }
 
  return (
    <div>
      <h3>{study.title}</h3>
      <button onClick={handleLike}>❤️ {study.likeCount}</button>
    </div>
  )
}
 
// 목록 컴포넌트 — splitAtom 결과를 사용
const StudyList = () => {
  // 🐣 영철: "studyAtomsAtom 은 atom 배열을 담은 atom 이에요. 신기하다!"
  const [studyAtoms, dispatch] = useAtom(studyAtomsAtom)
 
  return (
    <ul>
      {studyAtoms.map((studyAtom) => (
        <StudyCard
          key={`${studyAtom}`} // atom 자체를 key 로 사용
          studyAtom={studyAtom}
        />
      ))}
    </ul>
  )
}

// splitAtom 은 dispatch 함수도 반환해 — remove, insert, move 액션 지원
const StudyList = () => {
  const [studyAtoms, dispatch] = useAtom(studyAtomsAtom)
 
  return (
    <ul>
      {studyAtoms.map((studyAtom) => (
        <li key={`${studyAtom}`}>
          <StudyCard studyAtom={studyAtom} />
          {/* 개별 항목 삭제 */}
          <button onClick={() => dispatch({ type: 'remove', atom: studyAtom })}>
            삭제
          </button>
        </li>
      ))}
      {/* 새 항목 추가 */}
      <button onClick={() => dispatch({
        type: 'insert',
        value: { id: Date.now().toString(), title: '새 스터디', likeCount: 0 },
      })}>
        스터디 추가
      </button>
    </ul>
  )
}

// keyExtractor 를 사용하면 배열 순서가 바뀌어도 atom 이 재생성되지 않아
// 🦁 영호: "id 가 같은 항목은 같은 atom 을 재사용해요. 성능 향상!"
const studyAtomsAtom = splitAtom(
  studyListAtom,
  (study) => study.id, // keyExtractor — 고유 식별자
)

// ❌ 문제 코드
const Component = () => {
  const [title] = useAtom(selectAtom(studyAtom, (s) => s.title)) // 무한 루프!
}

// ✅ 모듈 최상단에 선언
const titleAtom = selectAtom(studyAtom, (s) => s.title)
 
// ✅ 또는 useMemo
const Component = () => {
  const titleAtom = useMemo(() => selectAtom(studyAtom, (s) => s.title), [])
  const title = useAtomValue(titleAtom)
}

import type { PrimitiveAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'
 
// keyExtractor 를 쓰면 타입 추론이 더 명확해짐
const studyAtomsAtom = splitAtom(studyListAtom, (s) => s.id)
 
const StudyCard = ({ studyAtom }: { studyAtom: PrimitiveAtom<Study> }) => {
  const [study] = useAtom(studyAtom)
  return <div>{study.title}</div>
}