React Props 전달 → 렌더링 패턴 전체 지도

값 → {value}

<Button label="확인" count={5} />

function Button({ label, count }) {
  return (
    <button>
      {label} ({count})
    </button>
  )
}

label은 문자열, count는 숫자로 전달되고 JSX 안에서 그대로 출력됩니다.

props가 없으면 기본값 사용

<Button />

function Button({
  variant = 'primary',
  size = 'md',
  disabled = false
}) {
  return (
    <button
      className={cn(
        styles.button,
        styles[variant],
        styles[size]
      )}
      disabled={disabled}
    >
      저장
    </button>
  )
}

태그 사이 내용

<Button>
  확인
</Button>

function Button({ children }) {
  return (
    <button>
      {children}
    </button>
  )
}

children에는 문자열뿐 아니라 JSX Element도 들어올 수 있습니다.

??로 대체값 사용

<Field
  errorText="이름을 입력해주세요."
>
  이름
</Field>

function Field({
  text,
  children,
  errorText,
  helperText
}) {
  const label = text ?? children
  const message = errorText ?? helperText
  const invalid = Boolean(errorText)

  return (
    <div
      className={cn(
        styles.field,
        invalid && styles.invalid
      )}
    >
      <label>{label}</label>

      <input
        aria-invalid={invalid}
      />

      {message && (
        <p
          className={cn(
            styles.message,
            invalid && styles.error
          )}
        >
          {message}
        </p>
      )}
    </div>
  )
}

&& 조건부 렌더링

<InputField
  label="이름"
  required
  errorText="필수 입력입니다."
/>

function InputField({
  label,
  required = false,
  errorText
}) {
  return (
    <div>
      {label && (
        <label>
          {label}
          {required && <span>*</span>}
        </label>
      )}

      <input />

      {errorText && (
        <p>{errorText}</p>
      )}
    </div>
  )
}

값이 존재하거나 Boolean이 true일 때만 UI를 렌더링합니다.

삼항 연산자

<Button loading={true}>
  저장
</Button>

function Spinner() {
  return <span>로딩중...</span>
}

function Button({
  loading = false,
  children
}) {
  return (
    <button>
      {loading
        ? <Spinner />
        : children}
    </button>
  )
}

props → 계산 → 렌더링

<Progress value={30} max={100} />

function Progress({
  value,
  max = 100
}) {
  const percent =
    (value / max) * 100

  return (
    <div>
      <div
        style={{
          width: `${percent}%`
        }}
      />
      <span>{percent}%</span>
    </div>
  )
}

배열에서 선택값 찾기

const items = [
  { label: '서울', value: 'seoul' },
  { label: '부산', value: 'busan' }
]

<SelectLabel
  items={items}
  value="busan"
/>

function SelectLabel({
  items,
  value
}) {
  const selectedItem =
    items.find(
      item => item.value === value
    )

  return (
    <span>
      {selectedItem?.label ?? '선택'}
    </span>
  )
}

Dropdown, Select, Tab에서 매우 자주 등장합니다.

클릭으로 선택값이 바뀌는 경우

function App() {
  const items = [
    { label: '서울', value: 'seoul' },
    { label: '부산', value: 'busan' }
  ]

  const [value, setValue] =
    useState('seoul')

  return (
    <SelectLabel
      items={items}
      value={value}
      onChange={setValue}
    />
  )
}

function SelectLabel({
  items,
  value,
  onChange
}) {
  // 렌더링될 때 현재 value로
  // 선택된 객체를 다시 계산
  const selectedItem =
    items.find(
      item => item.value === value
    )

  return (
    <div>
      <strong>
        현재 선택:
        {selectedItem?.label ?? '선택'}
      </strong>

      {items.map((item) => (
        <button
          key={item.value}
          onClick={() =>
            onChange(item.value)
          }
        >
          {item.label}
        </button>
      ))}
    </div>
  )
}

값 → class 선택

<Button variant="outline">
  저장
</Button>

const BUTTON_VARIANTS = {
  primary: 'btnPrimary',
  outline: 'btnOutline',
  danger: 'btnDanger'
}

function Button({
  variant = 'primary',
  children
}) {
  const variantClass =
    BUTTON_VARIANTS[variant]

  return (
    <button
      className={`button ${variantClass}`}
    >
      {children}
    </button>
  )
}

Boolean → class 추가

Boolean props에 따라 클래스를 붙이는 대표적인 방법들을 같은 Button 예제로 비교합니다.

① 배열 + filter(Boolean) + join()

<Button active disabled={false}>
  저장
</Button>

function Button({
  active = false,
  disabled = false,
  children
}) {
  const className = [
    'button',
    active && 'active',
    disabled && 'disabled'
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <button
      className={className}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

② 직접 만든 cn() 유틸

import { cn } from '@/utils/cn'
import styles from './Button.module.css'

<Button active disabled={false}>
  저장
</Button>

function Button({
  active = false,
  disabled = false,
  children
}) {
  return (
    <button
      className={cn(
        styles.button,
        active && styles.active,
        disabled && styles.disabled
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

export function cn(...inputs) {
  return inputs
    .flatMap((input) => {
      if (!input) return []

      if (Array.isArray(input)) {
        return cn(...input)
      }

      if (typeof input === 'object') {
        return Object.entries(input)
          .filter(([, value]) => Boolean(value))
          .map(([key]) => key)
      }

      return String(input)
    })
    .join(' ')
}

③ npm classnames — 조건식 방식

import classNames from 'classnames'
import styles from './Button.module.css'

<Button active disabled={false}>
  저장
</Button>

function Button({
  active = false,
  disabled = false,
  children
}) {
  return (
    <button
      className={classNames(
        styles.button,
        active && styles.active,
        disabled && styles.disabled
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

④ npm classnames — 객체 방식

import classNames from 'classnames'
import styles from './Button.module.css'

<Button active disabled={false}>
  저장
</Button>

function Button({
  active = false,
  disabled = false,
  children
}) {
  return (
    <button
      className={classNames(
        styles.button,
        {
          [styles.active]: active,
          [styles.disabled]: disabled
        }
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

⑤ CSS Modules + classnames/bind

import classNames from 'classnames/bind'
import styles from './Button.module.css'

const cx = classNames.bind(styles)

<Button active disabled={false}>
  저장
</Button>

function Button({
  active = false,
  disabled = false,
  children
}) {
  return (
    <button
      className={cx(
        'button',
        {
          active,
          disabled
        }
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

inline style

<Progress value={65} />

function Progress({ value }) {
  const percent = Math.min(
    Math.max(value, 0),
    100
  )

  return (
    <div className="track">
      <div
        className="bar"
        style={{
          width: `${percent}%`,
          opacity: percent / 100
        }}
      />
    </div>
  )
}

동적으로 변하는 폭, 위치, 투명도 등에 적합합니다.

CSS 변수 전달

React에서 동적인 값을 --변수명 형태의 CSS Custom Property로 전달하고, CSS에서는 var(--변수명)으로 꺼내 사용할 수 있습니다.

① 가장 단순한 구조

<Progress value={70} />

function Progress({ value }) {
  return (
    <div
      className="progress"
      style={{
        '--progress': `${value}%`
      }}
    />
  )
}

/* CSS */
.progress {
  width: var(--progress);
}

② 실제 Progress에서 더 자연스러운 구조

<Progress value={70} />

function Progress({ value }) {
  return (
    <div
      className="progress"
      style={{
        '--progress': `${value}%`
      }}
    >
      <div className="progressBar" />
    </div>
  )
}

/* CSS */
.progress {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progressBar {
  width: var(--progress);
  height: 100%;
  background: #f44336;
  transition: width 0.3s ease;
}

/* ① 부모에 선언 → 자식에서 사용 가능 */
<div
  class="progress"
  style="--progress: 70%"
>
  <div class="progressBar"></div>
</div>

/* CSS */
.progressBar {
  width: var(--progress);
}

/*
progress
--progress: 70%
    ↓ 상속
progressBar
width: var(--progress)
→ width: 70%
*/

/* ② 사용하는 요소 자신에게 선언 → 가능 */
<div class="progress">
  <div
    class="progressBar"
    style="--progress: 70%"
  ></div>
</div>

.progressBar {
  width: var(--progress);
}

/* ③ 더 상위 부모에 선언 → 가능 */
<section style="--progress: 70%">
  <div class="progress">
    <div class="progressBar"></div>
  </div>
</section>

.progressBar {
  width: var(--progress);
}

/*
section
  ↓ 상속
progress
  ↓ 상속
progressBar
*/

/* ④ 형제 요소에 선언 → 사용 불가 */
<div class="progress">
  <span
    style="--progress: 70%"
  ></span>

  <div class="progressBar"></div>
</div>

.progressBar {
  width: var(--progress);
  /* span의 자식이 아니므로
     span의 --progress를 상속받지 못함 */
}

③ 여러 CSS 변수 전달

<Progress
  value={70}
  height={8}
/>

function Progress({
  value,
  height
}) {
  return (
    <div
      className="progress"
      style={{
        '--progress': `${value}%`,
        '--bar-height': `${height}px`
      }}
    >
      <div className="progressBar" />
    </div>
  )
}

/* CSS */
.progress {
  width: 100%;
  height: var(--bar-height);
  background: #eee;
}

.progressBar {
  width: var(--progress);
  height: 100%;
  background: #f44336;
}

하나의 prop을 여러 곳에서 사용

<Button disabled>
  저장
</Button>

function Button({
  disabled = false,
  children
}) {
  return (
    <button
      disabled={disabled}
      className={
        disabled
          ? 'button disabled'
          : 'button'
      }
    >
      {disabled
        ? '사용 불가'
        : children}
    </button>
  )
}

props → 다른 값 계산

<Button
  size="lg"
  icon={PlusIcon}
>
  추가
</Button>

const ICON_SIZE = {
  lg: 24,
  md: 20,
  sm: 16
}

function Button({
  size = 'md',
  icon: Icon,
  children
}) {
  const iconSize =
    ICON_SIZE[size]

  return (
    <button>
      {Icon && (
        <Icon size={iconSize} />
      )}
      {children}
    </button>
  )
}

Slot props

<Card
  header={<Header />}
  footer={<Footer />}
>
  본문 내용
</Card>

function Card({
  header,
  footer,
  children
}) {
  return (
    <section>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </section>
  )
}

특정 위치를 외부 JSX로 채우는 패턴입니다.

as / 동적 태그

<Text as="h2">
  제목
</Text>

function Text({
  as: Component = 'span',
  children
}) {
  return (
    <Component>
      {children}
    </Component>
  )
}

Component 변수에 문자열 태그 또는 컴포넌트를 담아 동적으로 렌더링합니다.

HTML 태그뿐 아니라 React 컴포넌트도 가능

function Link({
  to,
  children,
  ...props
}) {
  return (
    <a
      href={to}
      {...props}
    >
      {children}
    </a>
  )
}

<Text
  as={Link}
  to="/home"
>
  홈으로
</Text>

function Text({
  as: Component = 'span',
  children,
  ...props
}) {
  return (
    <Component {...props}>
      {children}
    </Component>
  )
}

Button에서 사용하면 이해하기 더 쉬움

function Button({
  as: Component = 'button',
  variant = 'primary',
  children,
  className,
  ...props
}) {
  return (
    <Component
      className={cn(
        styles.button,
        styles[variant],
        className
      )}
      {...props}
    >
      {children}
    </Component>
  )
}

// ① as를 생략
<Button onClick={handleClick}>
  저장
</Button>

// Component = 'button'
// 실제 렌더링:
// <button>저장</button>


// ② a 태그로 변경
<Button
  as="a"
  href="/home"
>
  홈으로
</Button>

// Component = 'a'
// 실제 렌더링:
// <a href="/home">홈으로</a>

import { cn } from "@/utils/cn"
import styles from "./Typography.module.css"

export default function Typography({
  tagName: Tag = "p",
  className = "",
  children,
  ...rest
}) {
  const moduleClassName = className
    .split(/\s+/)
    .filter(Boolean)
    .map((className) => styles[className])

  return (
    <Tag
      className={cn(
        moduleClassName,
        className
      )}
      {...rest}
    >
      {children}
    </Tag>
  )
}

/* 풀어서 쓰면 */

function Button({
  as = 'button',
  children
}) {
  const Component = as

  return (
    <Component>
      {children}
    </Component>
  )
}

/* 위 코드를 간단히 쓰면 */

function Button({
  as: Component = 'button',
  children
}) {
  return (
    <Component>
      {children}
    </Component>
  )
}

함수를 그대로 연결

function App() {
  function handleAdd() {
    console.log('추가')
  }

  return (
    <Button onClick={handleAdd}>
      추가
    </Button>
  )
}

function Button({
  onClick,
  children
}) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  )
}

값을 추가해서 호출

function App() {
  function handleAdd(count) {
    console.log(count)
  }

  return (
    <Button
      onClick={() => handleAdd(10)}
    >
      10개 추가
    </Button>
  )
}

function Button({
  onClick,
  children
}) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  )
}

자식에서 callback 호출

const items = [
  { label: 'A', value: 'a' },
  { label: 'B', value: 'b' }
]

<Dropdown
  items={items}
  onChange={(item, index) => {
    console.log(item, index)
  }}
/>

function Dropdown({
  items,
  onChange
}) {
  return (
    <div>
      {items.map((item, index) => (
        <button
          key={item.value}
          onClick={(event) => {
            onChange?.(
              item,
              index,
              event
            )
          }}
        >
          {item.label}
        </button>
      ))}
    </div>
  )
}

onChange?.(...)는 함수가 전달된 경우에만 호출합니다.

event를 필요한 값으로 가공

<Input
  onChange={(value) => {
    console.log(value)
  }}
/>

function Input({ onChange }) {
  function handleChange(event) {
    const value =
      event.target.value

    onChange?.(value)
  }

  return (
    <input
      onChange={handleChange}
    />
  )
}

브라우저 이벤트 전체 대신 부모에게 필요한 값만 넘길 수 있습니다.

Render props

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' }
]

<List
  items={users}
  renderItem={(user) => (
    <strong>{user.name}</strong>
  )}
/>

function List({
  items,
  renderItem
}) {
  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {renderItem(item)}
        </div>
      ))}
    </div>
  )
}

구체적인 예제 — 회원 목록 렌더링

renderUser 함수를 별도로 만든 뒤 renderItem prop으로 함수 자체를 전달하는 예제입니다. 함수 전달 → 실행 흐름을 확인하기 쉽습니다.

const users = [
  {
    id: 1,
    name: '철수',
    age: 25,
    job: '프론트엔드 개발자'
  },
  {
    id: 2,
    name: '영희',
    age: 28,
    job: 'UI 디자이너'
  }
]

// ① 각 user를 어떻게 렌더링할지 정의
function renderUser(user) {
  return (
    <div className="userCard">
      <strong>{user.name}</strong>
      <span>{user.age}세</span>
      <p>{user.job}</p>
      <button>상세보기</button>
    </div>
  )
}

function App() {
  return (
    <List
      items={users}
      renderItem={renderUser}
    />
  )
}

function List({
  items,
  renderItem
}) {
  return (
    <div className="list">
      {items.map((item) => (
        <div
          key={item.id}
          className="listItem"
        >
          {renderItem(item)}
        </div>
      ))}
    </div>
  )
}

children을 함수로 사용

<DataLoader>
  {(data) => (
    <div>{data.name}</div>
  )}
</DataLoader>

function DataLoader({
  children
}) {
  const data = {
    name: '홍길동'
  }

  return (
    <section>
      {children(data)}
    </section>
  )
}

일반 {children}이 아니라 children(data)처럼 실행합니다.

배열 → map()

const items = [
  { label: '홈', value: 'home' },
  { label: '회원', value: 'user' }
]

<Tabs items={items} />

function Tabs({ items = [] }) {
  return (
    <div>
      {items.map((item) => (
        <button
          key={item.value}
        >
          {item.label}
        </button>
      ))}
    </div>
  )
}

items를 받으면 map을 예상하는 습관이 중요합니다.

객체 → 필요한 값 추출

<User
  user={{
    name: '홍길동',
    age: 20
  }}
/>

function User({ user }) {
  return (
    <div>
      <strong>
        {user.name}
      </strong>
      <span>
        {user.age}
      </span>
    </div>
  )
}

객체 spread 전달

const user = {
  name: '홍길동',
  age: 30
}

<UserCard {...user} />

function UserCard({
  name,
  age
}) {
  return (
    <article>
      <strong>{name}</strong>
      <span>{age}</span>
    </article>
  )
}

배열 + 현재 value

const items = [
  { label: '홈', value: 'home' },
  { label: '상품', value: 'product' }
]

<TabLabel
  items={items}
  value="product"
/>

function TabLabel({
  items,
  value
}) {
  const selectedItem =
    items.find(
      item => item.value === value
    )

  const label =
    selectedItem?.label ?? '선택'

  return <span>{label}</span>
}

“전체 데이터 + 현재 선택값” 패턴입니다.

나머지 props 한 번에 전달

<Input
  placeholder="이름"
  maxLength={20}
  disabled
/>

function Input({
  className,
  ...props
}) {
  return (
    <input
      className={className}
      {...props}
    />
  )
}

placeholder, maxLength, disabled 등이 ...props에 모여 실제 input으로 전달됩니다.

일부 props 소비 + 나머지만 전달

<Button
  variant="primary"
  size="lg"
  id="saveButton"
  title="저장"
>
  저장
</Button>

function Button({
  variant = 'primary',
  size = 'md',
  children,
  className,
  ...props
}) {
  const classes =
    `button ${variant} ${size} ${className ?? ''}`

  return (
    <button
      className={classes}
      {...props}
    >
      {children}
    </button>
  )
}

variant/size는 컴포넌트가 소비하고 나머지만 DOM으로 내려갑니다.

props 순서와 덮어쓰기

<Input type="password" />

function Input(props) {
  return (
    <>
      {/* props.type이 뒤에서 덮어씀 */}
      <input
        type="text"
        {...props}
      />

      {/* 마지막 type="text"가 최종 적용 */}
      <input
        {...props}
        type="text"
      />
    </>
  )
}

HTML 속성 직접 전달

<Button
  id="saveButton"
  title="저장"
  disabled
  aria-label="저장"
>
  저장
</Button>

function Button({
  children,
  ...props
}) {
  return (
    <button {...props}>
      {children}
    </button>
  )
}

Children.toArray

<ButtonGroup>
  <button>확인</button>
  <button>취소</button>
</ButtonGroup>

function ButtonGroup({
  children
}) {
  const items =
    Children.toArray(children)

  return (
    <div className="buttonGroup">
      {items.map((child, index) => (
        <div key={index}>
          {child}
        </div>
      ))}
    </div>
  )
}

여러 children을 배열처럼 다룰 때 사용합니다.

cloneElement

<RadioGroup
  value="a"
  onChange={(value) =>
    console.log(value)
  }
>
  <Radio value="a">A</Radio>
  <Radio value="b">B</Radio>
</RadioGroup>

function RadioGroup({
  value,
  onChange,
  children
}) {
  return (
    <div>
      {Children.map(
        children,
        (child) =>
          cloneElement(child, {
            checked:
              child.props.value === value,
            onChange
          })
      )}
    </div>
  )
}

function Radio({
  value,
  checked,
  onChange,
  children
}) {
  return (
    <label>
      <input
        type="radio"
        checked={checked}
        onChange={() =>
          onChange?.(value)
        }
      />
      {children}
    </label>
  )
}

부모 Group이 자식 요소에 필요한 props를 추가로 주입합니다.

cloneElement는 정확히 언제 사용하는가?

cloneElement()는 children으로 전달받은 기존 React 요소에 부모가 props를 추가하거나 변경해서 새로운 React 요소를 만들고 싶을 때 고려할 수 있습니다.

<RadioGroup value="a">
  <Radio value="a">A</Radio>
  <Radio value="b">B</Radio>
</RadioGroup>

// RadioGroup 내부에서 개념적으로
cloneElement(child, {
  checked: child.props.value === value,
  onChange
})

// 원래 자식
<Radio value="a">A</Radio>

// cloneElement 적용 후 개념적인 모습
<Radio
  value="a"
  checked={true}
  onChange={onChange}
>
  A
</Radio>

Tabs에서도 같은 방식으로 사용 가능

<Tabs value="product">
  <Tab value="home">홈</Tab>
  <Tab value="product">상품</Tab>
</Tabs>

function Tabs({
  value,
  children
}) {
  return (
    <div>
      {Children.map(
        children,
        (child) =>
          cloneElement(child, {
            active:
              child.props.value === value
          })
      )}
    </div>
  )
}

// 결과 개념
// home    → active=false
// product → active=true

Context

const RadioContext =
  createContext(null)

<RadioGroup
  value="a"
  onChange={(value) =>
    console.log(value)
  }
>
  <Radio value="a">A</Radio>
  <Radio value="b">B</Radio>
</RadioGroup>

function RadioGroup({
  value,
  onChange,
  children
}) {
  return (
    <RadioContext.Provider
      value={{ value, onChange }}
    >
      {children}
    </RadioContext.Provider>
  )
}

function Radio({
  value,
  children
}) {
  const group =
    useContext(RadioContext)

  const checked =
    group?.value === value

  return (
    <label>
      <input
        type="radio"
        checked={checked}
        onChange={() =>
          group?.onChange?.(value)
        }
      />
      {children}
    </label>
  )
}

Group의 상태를 중간 props 전달 없이 자손 컴포넌트가 공유합니다.

props에 따라 태그 자체 변경

<Action
  type="link"
  href="/home"
>
  홈으로
</Action>

function Action({
  type = 'button',
  href,
  children
}) {
  if (type === 'link') {
    return (
      <a href={href}>
        {children}
      </a>
    )
  }

  return (
    <button>
      {children}
    </button>
  )
}

같은 컴포넌트 API를 유지하면서 실제 렌더링 태그를 바꿀 수 있습니다.