컴포넌트 분리 전략 - 언제 쪼갤까?
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. 단일 책임 원칙(SRP)을 React에 적용할 때 의미하는 것은?
💡 단일 책임 원칙이란 하나의 컴포넌트가 하나의 명확한 역할만 담당해야 한다는 원칙입니다. 여러 역할을 하면 코드가 복잡해지고 재사용하기 어려워집니다.
Q2. 컨테이너/프레젠테이션 패턴에서 프레젠테이션 컴포넌트의 특징은?
💡 프레젠테이션 컴포넌트는 "어떻게 보이는가"에만 집중합니다. props를 받아서 UI를 렌더링하며, 비즈니스 로직이나 API 호출 없이 순수하게 UI만 담당합니다.
Q3. "Rule of Three"란 무엇인가요?
💡 "Rule of Three"는 같은 코드가 3번 이상 반복될 때 추상화(컴포넌트화)를 고려하라는 원칙입니다. 그 전에 추상화하면 Over-engineering이 될 수 있습니다.
Q4. Atomic Design에서 "molecules"란 무엇인가요?
💡 Atomic Design에서 molecules는 atoms들을 조합한 간단한 컴포넌트 그룹입니다. Input(atom)과 Button(atom)이 합쳐진 SearchBar가 molecule의 예입니다.
Q5. 컴포넌트를 분리하지 말아야 할 상황은?
💡 50줄 미만이고 명확한 하나의 역할만 하며, 재사용될 가능성이 없을 때는 분리하지 않아도 됩니다. 불필요한 분리는 Over-engineering으로 복잡도만 높입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.