Props Drilling (프롭스 드릴링) 🕳️: 컴포넌트 간 불필요한 의존성 심화와 유지보수의 악몽

Why Wrong?

How to Fix?

```jsx
// App.jsx
function App() {
  const user = { name: 'Alice', theme: 'dark', notifications: 5 };
  return <Page user={user} />;
}

// Page.jsx
function Page({ user }) {
  // Page는 user prop을 사용하지 않지만 Layout에 전달하기 위해 받음
  return <Layout user={user} />;
}

// Layout.jsx
function Layout({ user }) {
  // Layout도 user prop을 사용하지 않지만 Header에 전달하기 위해 받음
  return (
    <div>
      <Header user={user} />
      <Sidebar />
      <MainContent />
    </div>
  );
}

// Header.jsx - user prop은 Header에서만 필요하지만, Page와 Layout을 거쳐 전달됨
function Header({ user }) {
  return (
    <header>
      <h1>Welcome, {user.name}</h1>
      <span>Notifications: {user.notifications}</span>
    </header>
  );
}

// Sidebar.jsx, MainContent.jsx 등은 user prop이 필요 없음
```

**문제점:**
`user` 객체는 `Header` 컴포넌트에서만 실제로 사용되지만, `App`에서 `Page`를 거쳐 `Layout`을 거쳐 `Header`까지 여러 단계를 걸쳐 전달됩니다. 이는 `Page`와 `Layout` 컴포넌트가 자신에게는 필요 없는 `user` prop에 의존하게 만들고, 코드의 가독성을 떨어뜨리며, `user` prop이 변경될 때 `Page`와 `Layout`이 불필요하게 재렌더링될 가능성을 높입니다. 만약 `user` 객체에 새로운 속성을 추가하거나 기존 속성 이름을 변경해야 한다면, 중간의 모든 컴포넌트의 prop 정의를 수정해야 하는 번거로움이 있습니다.

```jsx
import React, { createContext, useContext } from 'react';

// 1. Context 생성: 공유할 데이터의 기본값(또는 null)으로 초기화
const UserContext = createContext(null);

// App.jsx
function App() {
  const user = { name: 'Alice', theme: 'dark', notifications: 5 };
  return (
    // 2. Context Provider를 사용하여 하위 컴포넌트에 값 제공
    <UserContext.Provider value={user}>
      <Page />
    </UserContext.Provider>
  );
}

// Page.jsx - user prop이 필요 없으므로, 더 이상 전달하지 않음
function Page() {
  return <Layout />;
}

// Layout.jsx - user prop이 필요 없으므로, 더 이상 전달하지 않음
function Layout() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent />
    </div>
  );
}

// Header.jsx - user prop을 직접 Context에서 소비
function Header() {
  // 3. useContext 훅을 사용하여 Provider로부터 값 소비
  const user = useContext(UserContext);
  if (!user) return null; // Context 값이 없을 경우 (예: Provider가 누락된 경우) 처리

  return (
    <header>
      <h1>Welcome, {user.name}</h1>
      <span>Notifications: {user.notifications}</span>
    </header>
  );
}

// Sidebar.jsx, MainContent.jsx 등은 여전히 user prop이 필요 없음
```

**개선된 점:**
`UserContext`를 사용하여 `user` 객체를 필요로 하는 `Header` 컴포넌트가 직접 데이터에 접근할 수 있게 되었습니다. 이제 `Page`와 `Layout` 컴포넌트는 `user` prop을 받을 필요가 없으므로, `user` prop에 대한 불필요한 의존성에서 벗어나 더욱 간결하고 재사용성이 높아졌습니다. 또한, `user` 객체가 변경되더라도 `Header` 컴포넌트와 `UserContext.Provider`를 감싸는 `App` 컴포넌트 외에는 다른 중간 컴포넌트가 재렌더링될 가능성이 줄어들어 성능 측면에서도 이점을 가질 수 있습니다.

You Might Also Like