4관문. Derived State

관문 4 / 7

Props에서 파생 가능한 값을 State로 복제하는 안티패턴을 제거하고 SSOT를 실현하라.

📖 이론 비급

Derived State: 단일 진실 공급원(SSOT)

Props를 State로 복사하면 두 개의 진실 공급원이 생겨 동기화 버그가 발생한다. useEffect로 동기화를 시도하면 렌더 후 한 박자 늦게 반영되는 깜빡임이 생긴다.

해결책: 파생 데이터는 렌더 중에 직접 계산하라. const fullName = ${firstName} ${lastName}``처럼 상태 없이 표현식으로 처리한다. 계산이 무겁다면 useMemo로 감싸는 것이 올바른 접근이다.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

export default function UserCard({ firstName, lastName }) {
  // 안티패턴: props를 state로 복제
  const [fullName, setFullName] = useState(`${firstName} ${lastName}`);

  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);

  // TODO: fullName state와 useEffect를 제거하고
  // 렌더 중 직접 계산하도록 수정하라

  return <p>{fullName}</p>;
}

Open Sandbox