오늘 나는 코스에서 첫 번째 거대한 컴포넌트를 깨끗하고 재사용 가능한 컴포넌트로 분리했습니다

Source: Dev.to

시작점: 코스에서 제공된 하나의 거대한 파일 😅

코스 안에서 전체 작동 예제가 제공되었는데, 여기에는 다음이 포함되었습니다:

• Navbar
• Search
• Movie List
• Watched Movies
• Summary
• Toggling sections
• Movie cards
• Watched movie cards
• Average ratings
• 모든 useState 로직

모두 하나의 거대한 컴포넌트 안에 있었습니다. 이것은 실수가 아니라 의도된 것이었습니다. 목표는 나에게 분할 연습을 강요하는 것이었고, 솔직히 말해 완벽한 도전이었습니다.

나의 과제: 거대한 컴포넌트를 논리적인 파트로 나누기 🧩

무작위로 나누는 대신, 나는 명확한 규칙을 따랐습니다: 각 컴포넌트는 UI의 의미 있는 부분을 나타내야 한다. 아래와 같이 나누었습니다:

NavBar 섹션

• Logo
• Search
• NumResults

이들은 모두 네비게이션과 관련이 있으므로 함께 유지합니다.

Main 섹션

두 개의 주요 패널을 포함합니다:

• ListBox (영화 목록)
• WatchedBox (시청한 영화 섹션)

영화 목록 컴포넌트

ListBox 안에서 다음과 같이 분리했습니다:

• MovieList
• Movie

시청 섹션 컴포넌트

WatchedBox 안에서 다음과 같이 분리했습니다:

• WatchedMoviesSummary
• WatchedMovieList
• WatchedMovie

이렇게 분할함으로써 구조가 한눈에 명확해졌습니다.

내가 만든 최종 컴포넌트 구조

App
 ├─ NavBar
 │   ├─ Logo
 │   ├─ Search
 │   └─ NumResults
 ├─ Main
 │   ├─ ListBox
 │   │    ├─ MovieList
 │   │    └─ Movie
 │   └─ WatchedBox
 │        ├─ WatchedMoviesSummary
 │        ├─ WatchedMovieList
 │        └─ WatchedMovie

깨끗하고 읽기 쉬우며, 코스에서 원했던 연습과 정확히 일치합니다.

오늘 배운 점

⭐ 1. 거대한 컴포넌트는 시작점이다
코스는 의도적으로 거대한 컴포넌트를 제공해 내가 직접 분해하는 방법을 배우게 했습니다.

⭐ 2. 분할은 논리적이어야, 무작위가 아니다
컴포넌트는 UI의 실제 “조각”을 나타내야 합니다.

⭐ 3. 중간 규모 컴포넌트가 모든 것을 쉽게 만든다
명확하고 이해하기 쉬운 블록 → 더 나은 개발자 경험.

⭐ 4. 분할 후 상태 관리가 쉬워진다
각 파트가 자체 로직을 담당하게 되어 모든 것이 뒤섞이지 않습니다.

마무리 생각 💭

오늘은 단순한 코딩 연습이 아니라 사고방식의 전환이었습니다. 나는 다음을 배웠습니다:

• 큰 혼란스러운 컴포넌트를
• 구조를 파악하고,
• 자연스러운 경계를 식별하고,
• 깨끗하고 재사용 가능한 파트로 나누는 방법.

이 연습은 무엇보다도 내 React 사고 방식을 크게 향상시켰습니다. 내일은 코스의 다음 파트를 진행하면서 같은 원칙을 새로운 기능에 적용할 예정입니다.

🔚 Note

내가 이 거대한 컴포넌트를 분할할 때 사용한 프레임워크와 접근 방식을 알고 싶다면, 반드시 이 블로그 포스트를 읽어보세요.