## πŸ“Œ Brief Summary 개방-폐쇄 원칙(Open/Closed Principle, OCP)은 μ†Œν”„νŠΈμ›¨μ–΄ 개체(클래슀, λͺ¨λ“ˆ, ν•¨μˆ˜ λ“±)κ°€ **ν™•μž₯μ—λŠ” μ—΄λ € μžˆμ–΄μ•Ό ν•˜κ³ , μˆ˜μ •μ—λŠ” λ‹«ν˜€ μžˆμ–΄μ•Ό ν•œλ‹€**λŠ” 섀계 원칙이닀. μ΄λŠ” κΈ°μ‘΄ μ†ŒμŠ€ μ½”λ“œλ₯Ό λ³€κ²½ν•˜μ§€ μ•Šκ³ λ„ μ‹œμŠ€ν…œμ˜ κΈ°λŠ₯을 ν™•μž₯ν•  수 μžˆμ–΄μ•Ό 함을 μ˜λ―Έν•˜λ©°, Reactμ—μ„œλŠ” μ»΄ν¬λ„ŒνŠΈ ν•©μ„±(Composition)κ³Ό μ£Όμž… νŒ¨ν„΄μ„ 톡해 이λ₯Ό μ‹€ν˜„ν•œλ‹€. ## πŸ“– Core Content 1. **ν™•μž₯μ„±κ³Ό 폐쇄성 (Open & Closed)** - μ‹ κ·œ κΈ°λŠ₯ μΆ”κ°€ μ‹œ κΈ°μ‘΄ μ½”λ“œλ₯Ό κ±΄λ“œλ¦¬μ§€ μ•ŠμŒμœΌλ‘œμ¨ μ˜λ„μΉ˜ μ•Šμ€ 버그 λ°œμƒ(Side Effects)을 μ›μ²œ μ°¨λ‹¨ν•œλ‹€. - κΈ°μ‘΄ κΈ°λŠ₯의 μ•ˆμ •μ„±μ„ μœ μ§€ν•˜λ©΄μ„œλ„ λ³€ν™”ν•˜λŠ” μš”κ΅¬μ‚¬ν•­μ— μœ μ—°ν•˜κ²Œ λŒ€μ‘ν•˜λŠ” 것이 핡심 λͺ©μ μ΄λ‹€. 2. **Reactμ—μ„œμ˜ κ΅¬ν˜„: μ»΄ν¬λ„ŒνŠΈ ν•©μ„± (Composition)** - 상속이 μ•„λ‹Œ 합성을 ꢌμž₯ν•˜λŠ” React의 νŠΉμ„±μ— 따라, `children` prop을 ν™œμš©ν•˜μ—¬ μ™ΈλΆ€μ—μ„œ λ Œλ”λ§ λ‚΄μš©μ„ μ£Όμž…λ°›λŠ” λ°©μ‹μœΌλ‘œ ν™•μž₯성을 ν™•λ³΄ν•œλ‹€. - 예: κΈ°λ³Έ Modal μ»΄ν¬λ„ŒνŠΈλ₯Ό μˆ˜μ •ν•˜μ§€ μ•Šκ³ , λ‚΄λΆ€ μ½˜ν…μΈ λ₯Ό `children`으둜 μ „λ‹¬ν•˜μ—¬ λ‹€μ–‘ν•œ ν˜•νƒœμ˜ λͺ¨λ‹¬λ‘œ ν™•μž₯. 3. **Render Props 및 Slot νŒ¨ν„΄** - ꡬ체적인 λ‘œμ§μ΄λ‚˜ UI 쑰각을 ν•¨μˆ˜λ‚˜ 객체 ν˜•νƒœλ‘œ μ£Όμž…λ°›μ•„ μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€ μ†ŒμŠ€ μ½”λ“œμ˜ μˆ˜μ • 없이 λ™μž‘μ„ λ³€κ²½ν•œλ‹€. 4. **선언적 좔상화** - 쑰건문(`if/else`)을 톡해 μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ λͺ¨λ“  μΌ€μ΄μŠ€λ₯Ό μ²˜λ¦¬ν•˜λŠ” λŒ€μ‹ , μ™ΈλΆ€μ—μ„œ μ£Όμž…λœ μ»΄ν¬λ„ŒνŠΈκ°€ 각자의 μ±…μž„μ„ λ‹€ν•˜λ„λ‘ μ„€κ³„ν•œλ‹€. ## βš–οΈ Trade-offs & Caveats - **좔상화 μ˜€λ²„ν—€λ“œ**: OCPλ₯Ό μ—„κ²©νžˆ μ§€ν‚€κΈ° μœ„ν•΄ λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈλ₯Ό ν•©μ„± ꡬ쑰둜 λ§Œλ“€λ©΄, μ»΄ν¬λ„ŒνŠΈ νŠΈλ¦¬κ°€ κΉŠμ–΄μ§€κ³  `props` 전달 κ²½λ‘œκ°€ λ³΅μž‘ν•΄μ§€λŠ” 'Prop Drilling'μ΄λ‚˜ 인지적 λΆ€ν•˜κ°€ λ°œμƒν•  수 μžˆλ‹€. - **KISS μ›μΉ™κ³Όμ˜ 좩돌**: λ‹¨μˆœν•œ κΈ°λŠ₯ μΆ”κ°€λ₯Ό μœ„ν•΄ λ³΅μž‘ν•œ Render Propsλ‚˜ κ³ μ°¨ μ»΄ν¬λ„ŒνŠΈ(HOC)λ₯Ό λ„μž…ν•˜λŠ” 것은 'Keep It Simple' 원칙에 μ–΄κΈ‹λ‚  수 μžˆμœΌλ―€λ‘œ μ μ ˆν•œ κ· ν˜•μ΄ ν•„μš”ν•˜λ‹€. - **초기 섀계 λΉ„μš©**: ν™•μž₯을 κ³ λ €ν•œ μΈν„°νŽ˜μ΄μŠ€ μ„€κ³„λŠ” 초기 개발 μ‹œκ°„μ„ 더 많이 μ†Œμš”ν•˜κ²Œ λ§Œλ“€λ©°, λ―Έλž˜μ— λ°œμƒν•˜μ§€ μ•Šμ„ ν™•μž₯을 λŒ€λΉ„ν•˜λŠ” YAGNI μœ„λ°˜ κ°€λŠ₯성이 μ‘΄μž¬ν•œλ‹€. ## πŸ”— Knowledge Connections ### Related Concepts - **Component Composition**: OCPλ₯Ό μ‹€ν˜„ν•˜λŠ” React의 핡심 기술 (관계: μ‹€μ²œ 방법) - **SOLID Principles**: OCPλ₯Ό ν¬ν•¨ν•œ 5λŒ€ 섀계 원칙 (관계: μƒμœ„ μ² ν•™) - **Render Props / Children Prop**: κΈ°λŠ₯ μ£Όμž…μ„ μœ„ν•œ ꡬ체적 API (관계: κ΅¬ν˜„ 도ꡬ) ### Deeper Research Questions 1. μ»΄ν¬λ„ŒνŠΈ 합성을 톡해 OCPλ₯Ό μ€€μˆ˜ν•  λ•Œ, κΉŠμ€ νŠΈλ¦¬μ— μ˜ν•œ λ¦¬λ Œλ”λ§ μ„±λŠ₯ μ €ν•˜λ₯Ό λ°©μ§€ν•˜κΈ° μœ„ν•œ λ©”λͺ¨μ΄μ œμ΄μ…˜ μ „λž΅μ€? 2. ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„μ—μ„œ 'Dependency Injection' κ°œλ…μ΄ OCP κ΅¬ν˜„μ— μ–΄λ–»κ²Œ μ μš©λ˜λŠ”κ°€? 3. 수백 개의 쑰건뢀 UIκ°€ ν•„μš”ν•œ μ—”ν„°ν”„λΌμ΄μ¦ˆ ν™˜κ²½μ—μ„œ OCPλ₯Ό μ§€ν‚€κΈ° μœ„ν•œ 'Strategy Pattern'의 ν”„λ‘ νŠΈμ—”λ“œμ  해석은? 4. μ½”λ“œ μˆ˜μ • 없이 ν™•μž₯만 ν—ˆμš©ν•˜λŠ” 원칙이 λŒ€κ·œλͺ¨ λ¦¬νŒ©ν† λ§μ΄λ‚˜ 기술 μŠ€νƒ ꡐ체 μ‹œμ—λŠ” μ–΄λ–»κ²Œ μœ μ—°ν•˜κ²Œ μ μš©λ˜μ–΄μ•Ό ν•˜λŠ”κ°€? 5. CSS-in-JS ν™˜κ²½μ—μ„œ μŠ€νƒ€μΌ ν™•μž₯을 OCP κ΄€μ μ—μ„œ μ„€κ³„ν•˜λŠ” λͺ¨λ²” μ‚¬λ‘€λŠ”? ### Practical Application Contexts - **UI 라이브러리 섀계**: 곡톡 λ²„νŠΌ, λͺ¨λ‹¬, ν…Œμ΄λΈ” μ»΄ν¬λ„ŒνŠΈ μ œμž‘ μ‹œ μŠ€νƒ€μΌκ³Ό λ™μž‘μ„ μ™ΈλΆ€μ—μ„œ μ£Όμž… κ°€λŠ₯ν•˜λ„λ‘ 섀계. - **λ³΅μž‘ν•œ 폼(Form) μ—”μ§„**: μƒˆλ‘œμš΄ μž…λ ₯ νƒ€μž…μ΄ μΆ”κ°€λ˜μ–΄λ„ 메인 폼 λ‘œμ§μ„ μˆ˜μ •ν•  ν•„μš” μ—†λŠ” ν”ŒλŸ¬κ·ΈμΈ 방식 ꡬ쑰 ꡬ좕. ### Adjacent Topics - **Single Responsibility Principle (SRP)** - **KISS (Keep It Simple, Stupid)** - **Inversion of Control (IoC)**