[이제와서 시작하는 React 마스터하기 #18] 고급 패턴 소개
[이제와서 시작하는 React 마스터하기 #18] 고급 패턴 소개
React Day 18 - 실무에서 자주 보이는 “고급 패턴”들이 있어요. 지금 당장 배울 필요는 없지만, 이런 게 있다는 것만 알아두세요!
오늘 배울 내용
- ✅ 고급 패턴이 뭔가요?
- ✅ 어떤 패턴들이 있나요?
- ✅ 언제 필요한가요?
- ✅ 다음 학습 방향
고급 패턴이 뭔가요?
고급 패턴은 React 코드를 더 재사용 가능하고 유지보수하기 쉽게 만드는 설계 방법이에요.
일상 비유 🏗️
레고 블록으로 집을 지을 때:
초급: 블록 하나하나 쌓아요
- 시간이 오래 걸려요
- 같은 걸 계속 반복해요
고급: 미리 만든 “벽 세트”, “지붕 세트” 사용
- 빠르게 조립해요
- 여러 집에 재사용해요
고급 패턴은 이런 “세트”를 만드는 방법이에요!
주요 고급 패턴들
1. Compound Components (복합 컴포넌트)
뭔가요?
- 서로 연결된 여러 컴포넌트를 하나의 세트로 만드는 패턴
- 마치 HTML의
<select>와<option>처럼
예시를 볼까요?
1
2
3
4
5
6
7
8
9
10
11
12
// 일반적인 방법
<Dropdown
options={['사과', '바나나', '오렌지']}
onSelect={handleSelect}
/>
// Compound Components 패턴
<Dropdown onSelect={handleSelect}>
<Dropdown.Item value="apple">사과</Dropdown.Item>
<Dropdown.Item value="banana">바나나</Dropdown.Item>
<Dropdown.Item value="orange">오렌지</Dropdown.Item>
</Dropdown>
장점:
- 더 유연해요
- 커스터마이징하기 쉬워요
어디서 봤나요?
- Radix UI, Headless UI 같은 라이브러리들
- Material-UI의 일부 컴포넌트들
2. Render Props
뭔가요?
- 함수를 props로 전달해서 렌더링을 제어하는 패턴
간단한 예시:
1
2
3
4
5
6
<DataFetcher url="/api/users">
{(data, loading) => {
if (loading) return <div>로딩중...</div>;
return <UserList users={data} />;
}}
</DataFetcher>
요즘은?
- Custom Hooks로 대체되는 추세예요!
- 구 버전 라이브러리에서 가끔 볼 수 있어요
3. HOC (High-Order Components)
뭔가요?
- 컴포넌트를 받아서 새로운 컴포넌트를 만들어내는 함수
- 기능을 “감싸서” 추가하는 패턴
1
2
3
4
// 로그인 체크 기능 추가
const ProtectedPage = withAuth(MyPage);
// 이제 ProtectedPage는 로그인 체크 기능이 있어요
요즘은?
- 이것도 Custom Hooks로 대체되는 추세예요!
- 오래된 코드에서 자주 볼 수 있어요
언제 배워야 하나요?
🟡 아직은 괜찮아요
입문자에게 고급 패턴은 아직 필요 없어요!
이유:
- React 기초가 더 중요해요
- Custom Hooks만 잘 써도 충분해요
- 실무에서도 점진적으로 배워요
🟢 이럴 때 배우세요
- 라이브러리 코드를 읽다가 모르는 패턴을 발견했어요
- 자신만의 재사용 가능한 컴포넌트 라이브러리를 만들어요
- 팀에서 이런 패턴을 사용하고 있어요
실무 베스트 프랙티스
고급 패턴보다 더 중요한 것들이 있어요!
1. 작은 컴포넌트로 나누기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ❌ 나쁜 예: 너무 큰 컴포넌트
function UserDashboard() {
// 500줄의 코드...
}
// ✅ 좋은 예: 작은 컴포넌트들
function UserDashboard() {
return (
<>
<UserHeader />
<UserStats />
<UserActivity />
<UserSettings />
</>
);
}
2. Props를 명확하게 하기
1
2
3
4
5
// ❌ 불명확
<Button type="1" />
// ✅ 명확
<Button variant="primary" size="large" />
3. 조건부 렌더링 간단하게
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ❌ 복잡
{user ? (
user.isAdmin ? (
<AdminPanel />
) : (
<UserPanel />
)
) : (
<Login />
)}
// ✅ 간단
{!user && <Login />}
{user && !user.isAdmin && <UserPanel />}
{user && user.isAdmin && <AdminPanel />}
4. 상태를 가까운 곳에
1
2
3
4
5
6
7
8
9
10
11
// ❌ 최상위에 모든 상태
function App() {
const [modalOpen, setModalOpen] = useState(false);
// Modal만 쓰는 상태인데 App에 있음!
}
// ✅ 필요한 곳에만
function ModalContainer() {
const [modalOpen, setModalOpen] = useState(false);
// Modal에서만 쓰니까 여기에!
}
정리
고급 패턴이란?
- 코드를 재사용 가능하게 만드는 설계 방법
- Compound Components, Render Props, HOC 등
- 입문자에게는 아직 필요 없어요!
더 중요한 것들
✅ 작은 컴포넌트로 나누기 ✅ 명확한 Props 이름 ✅ 간단한 조건부 렌더링 ✅ 상태를 가까운 곳에 두기
다음 학습 로드맵
고급 패턴을 더 배우고 싶다면?
1단계: 기초 다지기
- React 기본을 완전히 이해하기
- Custom Hooks 마스터하기
- 컴포넌트 설계 연습하기
2단계: 패턴 이해하기
- Compound Components 패턴 익히기
- 라이브러리 코드 읽어보기
- 간단한 재사용 컴포넌트 만들어보기
3단계: 실전 적용
- 자신만의 컴포넌트 라이브러리 만들기
- 오픈소스 라이브러리 기여하기
추천 학습 자료
📚 공식 문서:
🎥 온라인 강의:
- “React Design Patterns” 검색
- Kent C. Dodds의 Advanced React Patterns
💻 실습:
- Radix UI, Headless UI 코드 읽어보기
- 간단한 Dropdown 컴포넌트 직접 만들어보기
다음 포스트 예고
다음 시간에는 실전 프로젝트 아이디어를 소개할게요!
지금까지 배운 내용으로 어떤 프로젝트를 만들 수 있는지, 단계별로 무엇을 만들면 좋은지 알아봐요!
“늦었다고 생각할 때가 가장 빠를 때입니다. 기초를 탄탄히! 🎯”
React 완벽 가이드 시리즈
- React란 무엇인가?
- 첫 React 앱 만들기
- useState - 클릭하면 바뀌는 화면
- Props - 컴포넌트끼리 대화하기
- useEffect - 컴포넌트 생명주기
- 조건부/리스트 렌더링
- Context API - Props 지옥에서 탈출하기
- Custom Hooks 만들기
- React Router 완벽 가이드
- 폼 처리와 유효성 검증
- React 성능 최적화
- 에러 바운더리와 Suspense
- 상태 관리 라이브러리
- 서버 상태 관리
- React와 TypeScript 맛보기
- Next.js 맛보기
- React 테스팅 입문
- 고급 패턴 소개 ← 현재 글
- 실전 프로젝트 아이디어
- React 배포하기
관련 자료
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.