React Fiber 아키텍처와 Reconciliation 심화 이해

const UserInfoForm = () => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="form-container">
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? "취소" : "편집"}
      </button>

      {isEditing ? (
        <input
          type="text"
          placeholder="이름을 입력하세요"
          className="edit-input"
        />
      ) : (
        <input
          type="text"
          placeholder="이름을 입력하세요"
          disabled
          className="view-input"
        />
      )}
    </div>
  );
};

{isEditing ? (
  <input type="text" placeholder="이름을 입력하세요" />
) : (
  <div className="view-only-display">여기에 이름이 표시됩니다</div>
)}

// 커스텀 컴포넌트의 경우
{
  type: Input,  // Input 함수 자체가 참조됨
  props: {
    id: "company-tax-id",
    placeholder: "사업자 등록번호 입력"
  }
}

// 첫 번째 렌더
<div>
  <Counter />
</div>

// 두 번째 렌더
<span>
  <Counter />
</span>

// showDetails가 true일 때
<>
  {showDetails ? <UserProfile userId={123} /> : <LoginPrompt />}
</>

// showDetails가 false일 때
<>
  {showDetails ? <UserProfile userId={123} /> : <LoginPrompt />}
</>

// isPrimary에 관계없이 UserProfile은 유지됨
<>
  {isPrimary ? (
    <UserProfile userId={123} role="primary" />
  ) : (
    <UserProfile userId={456} role="secondary" />
  )}
</>

const TabContent = ({ activeTab, tabs }) => {
  return (
    <div className="tab-container">
      {tabs.map((tab) => (
        <div key={tab.id} className="tab-content">
          {activeTab === tab.id ? (
            <UserProfile
              key="active-profile"  // 고정된 key 사용
              userId={tab.userId}
              role={tab.role}
            />
          ) : (
            <div key="placeholder" className="placeholder">
              {tab.userId}의 프로필을 보려면 탭을 선택하세요
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

const UserForm = ({ userId }) => {
  // Uncontrolled 컴포넌트 사용
  return (
    <form>
      <input
        key={userId}  // userId가 바뀌면 DOM 엘리먼트 재생성
        name="username"
        defaultValue=""  // value 대신 defaultValue 사용
      />
    </form>
  );
};

<>
  {items.map((item) => (
    <ListItem key={item.id} />
  ))}
  <StaticElement />  {/* items가 변해도 재마운트되지 않음 */}
</>

[
  // 전체 동적 배열이 하나의 자식으로 취급됨
  [
    { type: ListItem, key: "1" },
    { type: ListItem, key: "2" },
  ],
  { type: StaticElement },  // 항상 두 번째 위치 유지
]

const App = () => {
  const [filterText, setFilterText] = useState("");
  const filteredUsers = users.filter(user =>
    user.name.includes(filterText)
  );

  return (
    <>
      <SearchBox filterText={filterText} onChange={setFilterText} />
      <UserList users={filteredUsers} />
      <ExpensiveComponent />  {/* 필터와 무관한데 리렌더링됨 */}
    </>
  );
};

const UserSection = () => {
  const [filterText, setFilterText] = useState("");
  const filteredUsers = users.filter(user =>
    user.name.includes(filterText)
  );

  return (
    <>
      <SearchBox filterText={filterText} onChange={setFilterText} />
      <UserList users={filteredUsers} />
    </>
  );
};

const App = () => {
  return (
    <>
      <UserSection />
      <ExpensiveComponent />  {/* 필터 변경 시 리렌더링 안 됨 */}
    </>
  );
};

// ❌ 너무 많은 책임을 가진 컴포넌트
const ProductPage = ({ productId }) => {
  const [selectedSize, setSelectedSize] = useState("medium");
  const [quantity, setQuantity] = useState(1);
  const [shipping, setShipping] = useState("express");
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    fetchProductDetails(productId);
    fetchReviews(productId).then(setReviews);
  }, [productId]);

  // 사이즈 변경 시 리뷰까지 리렌더링됨
  return (
    <div>
      <ProductInfo /* ... */ />
      <ShippingOptions /* ... */ />
      <Reviews reviews={reviews} />
    </div>
  );
};

const ProductPage = ({ productId }) => {
  return (
    <div>
      <ProductConfig productId={productId} />
      <ReviewsSection productId={productId} />
    </div>
  );
};

const ProductConfig = ({ productId }) => {
  const [selectedSize, setSelectedSize] = useState("medium");
  const [quantity, setQuantity] = useState(1);
  const [shipping, setShipping] = useState("express");

  // 제품 설정 관련 로직만
  return (/* ... */);
};

const ReviewsSection = ({ productId }) => {
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    fetchReviews(productId).then(setReviews);
  }, [productId]);

  // 리뷰 관련 로직만
  return <Reviews reviews={reviews} />;
};