React 상태 올리기 — 대부분의 경우 하지 않는 게 낫다

import { useState } from 'react'
import { Modal } from './components/Modal'
 
export function App() {
  const [open, setOpen] = useState(false)
 
  return (
    <div>
      <Modal open={open} setOpen={setOpen} />
    </div>
  )
}

type ModalProps = {
  open: boolean
  setOpen: (open: boolean) => void
}
 
export function Modal({ open, setOpen }: ModalProps) {
  return (
    <>
      <button onClick={() => setOpen(true)}>열기</button>
      {open && (
        <div className="modal">
          <button onClick={() => setOpen(false)}>닫기</button>
          <p>모달 내용</p>
        </div>
      )}
    </>
  )
}

import { useState } from 'react'
 
export function Modal() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <button onClick={() => setOpen(true)}>열기</button>
      {open && (
        <div className="modal">
          <button onClick={() => setOpen(false)}>닫기</button>
          <p>모달 내용</p>
        </div>
      )}
    </>
  )
}

import { Modal } from './components/Modal'
 
export function App() {
  return (
    <div>
      <Modal />
    </div>
  )
}

import { useState } from 'react'
import { TabList } from './TabList'
import { TabPanel } from './TabPanel'
 
const tabs = ['개요', '리뷰', '설정']
 
export function TabContainer() {
  const [activeIndex, setActiveIndex] = useState(0)
 
  return (
    <div>
      <TabList
        tabs={tabs}
        activeIndex={activeIndex}
        onSelect={setActiveIndex}
      />
      <TabPanel
        title={tabs[activeIndex]}
        content={`${tabs[activeIndex]} 내용`}
      />
    </div>
  )
}

import { useState } from 'react'
 
type ModalProps = {
  open?: boolean
  onOpenChange?: (open: boolean) => void
}
 
export function Modal({ open: controlledOpen, onOpenChange }: ModalProps) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
 
  const isControlled = controlledOpen !== undefined
  const open = isControlled ? controlledOpen : uncontrolledOpen
 
  const setOpen = (next: boolean) => {
    if (!isControlled) {
      setUncontrolledOpen(next)
    }
    onOpenChange?.(next)
  }
 
  return (
    <>
      <button onClick={() => setOpen(true)}>열기</button>
      {open && (
        <div className="modal">
          <button onClick={() => setOpen(false)}>닫기</button>
          <p>모달 내용</p>
        </div>
      )}
    </>
  )
}