docs: Add ContextAPI example to Props Drilling guide

[jungpaeng]

📝 Key Changes

• Enhanced Props Drilling concept explanation
  • Added practical examples (name → firstName)
  • Clarified scenarios and issues related to Props Drilling
• Added step-by-step solutions
  • Introduced Composition pattern approach
  • Added Context API usage guidelines and best practices
• Improved code examples
  • Added ItemEditBody component for better implementation
  • Added Context API implementation examples

🖼️ Before and After Comparison

Before	After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frontend-fundamentals	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2025 3:42am

[Kimbangg]

@jungpaeng
Thank you for your efforts, from discussions to contributing to the documentation, all for better code. As I reviewed the document you wrote, I left comments on areas that might benefit from some revisions. 🙏

[Kimbangg]

I think wrapping it in :::tip could improve readability 👀

Suggested change

	ContextAPI를 사용하면 매우 쉽게 Props Drilling을 해결할 수 있지만, Props Drilling이 되는 모든 값을 ContextAPI로 관리해야 하는 것은 아니에요.
	1. 컴포넌트는 props를 통해서 어떤 데이터를 사용할지 명확하게 표현해요.
	컴포넌트의 역할과 의도를 담고 있는 props라면 문제가 되지 않을 수 있어요.
	2. ContextAPI를 사용하기 전, `children` prop을 이용해서 컴포넌트를 전달해 뎁스를 줄일 수 있어요.
	데이터를 사용하지 않는 단순히 값을 전달하기 위한 용도의 컴포넌트는 props가 컴포넌트의 역할과 의도를 나타내지 않을 수 있어요. 이러한 경우에 조합(Composition) 패턴을 사용한다면 불필요한 뎁스를 줄일 수 있어요.
	위 내용을 먼저 고려를 해보고 접근 방법이 모두 맞지 않을 때 최후의 방법으로 ContextAPI를 사용해야 해요.
	불필요한 Props Drilling을 제거하게 되면, 불필요한 중간 추상화를 제거하여 개발자가 컴포넌트의 역할과 의도를 명확히 이해할 수 있도록 도와줘요.
	::: tip
	ContextAPI를 사용하면 손쉽게 Props Drilling을 해결할 수 있지만, 모든 Props Drilling을 ContextAPI로 관리해야 하는 것은 아니에요.
	1. 컴포넌트는 props를 통해서 어떤 데이터를 사용할지 명확하게 표현해요.
	컴포넌트의 역할과 의도를 담고 있는 props라면 문제가 되지 않을 수 있어요.
	2. ContextAPI를 사용하기 전, 조합 패턴을 이용하면 depth를 줄일 수 있어요.
	데이터를 사용하지 않는 단순히 값을 전달하기 위한 용도의 컴포넌트는 props가 컴포넌트의 역할과 의도를 나타내지 않을 수 있어요. 이러한 경우에 조합(Composition) 패턴을 사용한다면 불필요한 뎁스를 줄일 수 있어요.
	위 내용을 먼저 고려를 해보고 접근 방법이 모두 맞지 않을 때 최후의 방법으로 ContextAPI를 사용해야 해요.
	불필요한 Props Drilling을 제거하게 되면, 불필요한 중간 추상화를 제거하여 개발자가 컴포넌트의 역할과 의도를 명확히 이해할 수 있도록 도와줘요.
	:::

[jungpaeng]

• docs: Add tip about ContextAPI and Props Drilling best practices
• docs: Correct 'depth' terminology in item-edit-modal.md

[Kimbangg]

How about breaking it down and explaining it as follows?

### A. 조합(Composition) 패턴 활용

조합 패턴을 사용하면 부모 컴포넌트가 자식 컴포넌트에 Props를 일일이 전달해야 하는 Props Drilling 문제를 해결할 수 있어요.

더 나아가, 조합 패턴은 불필요한 중간 추상화를 제거하여 개발자가 각 컴포넌트의 역할과 의도를 보다 명확하게 이해하도록 돕습니다.

```tsx
function ItemEditModal({ open, items, recommendedItems, onConfirm, onClose }) {
  const [keyword, setKeyword] = useState("");

  return (
    <Modal open={open} onClose={onClose}>
      <ItemEditBody onClose={onClose}>
        <ItemEditList
          keyword={keyword}
          items={items}
          recommendedItems={recommendedItems}
          onConfirm={onConfirm}
        />
      </ItemEditBody>
    </Modal>
  );
}

function ItemEditBody({ children, onClose }) {
  return (
    <>
      <div style="display: flex; justify-content: space-between;">
        <Input
          value={keyword}
          onChange={(e) => onKeywordChange(e.target.value)}
        />
        <Button onClick={onClose}>닫기</Button>
      </div>
      {children}
    </>
  );
}

B. ContextAPI 활용

Context API를 활용하면, 데이터의 흐름을 간소화하고 계층 구조 전체에 쉽게 공유할 수 있어요.

조합 패턴을 사용해도, 컴포넌트가 복잡하고 깊다면, ContextAPI를 사용함으로써 불필요한 Props Drilling을 제거할 수 있어요.

function ItemEditModal({ open, onConfirm, onClose }) {
  const [keyword, setKeyword] = useState("");

  return (
    <Modal open={open} onClose={onClose}>
      <ItemEditBody onClose={onClose}>
        <ItemEditList keyword={keyword} onConfirm={onConfirm} />
      </ItemEditBody>
    </Modal>
  );
}

function ItemEditList({ children, onClose }) {
  const { items, recommendedItems } = useItemEditModalContext();

  return (
    <>
      <div style="display: flex; justify-content: space-between;">
        <Input
          value={keyword}
          onChange={(e) => onKeywordChange(e.target.value)}
        />
        <Button onClick={onClose}>닫기</Button>
      </div>
      {children}
    </>
  );
}

[jungpaeng]

77360f8

[Kimbangg]

I think we need to standardize by using either ‘프롭’ or ‘prop’ consistently.

 ContextAPI를 사용하기 전, `children` prop을 이용해서 컴포넌트를 전달해 뎁스를 줄일 수 있어요.

[jungpaeng]

docs: Refactor prop terminology in item-edit-modal.md

[Seol-JY]

Would you mind updating style prop to an object?

Suggested change

	<div style="display: flex; justify-content: space-between;">
	<div style={{ display: "flex", justifyContent: "space-between" }}>

[jungpaeng]

I agree with this opinion, but currently, most documents write the style attribute as a string.
To maintain consistency in the documents, it would be better to keep it as a string.

[jungpaeng]

@Kimbangg @Seol-JY

I have incorporated the feedback and would appreciate it if you could review it again.

[Kimbangg]

@jungpaeng Thank you for your contribute 💯