14주차 – Custom Hooks, usePopcorn 마무리, 그리고 코드 설계 배우기

Source: Dev.to

마일스톤: usePopcorn 완료

The usePopcorn app is finally complete after three weeks of development. This week focused on:

• Final polish → 최종 다듬기
• Cleanup → 정리
• Refactoring → 리팩토링
• Structuring the code better with custom hooks → 커스텀 훅을 사용해 코드 구조 개선

Live Demo: Live App
GitHub: Readme File Link

---

커스텀 훅

Custom hooks are not just a new feature; they represent a new way of thinking about React code architecture. They help:

• Separate logic from UI → UI와 로직을 분리
• Clean up components → 컴포넌트 정리
• Make code reusable → 코드를 재사용 가능하게 만들기
• Design your own abstractions → 자신만의 추상화 설계

예시: useGeolocation

The week’s challenge was to build a custom hook for geolocation that handles:

• Loading state → 로딩 상태
• Errors → 오류
• Position data → 위치 데이터
• Click count → 클릭 횟수
• The underlying browser API call → 기본 브라우저 API 호출

The consuming component only needs to request:

const { position, loading, error, requestLocation } = useGeolocation();

This exercise emphasized what a hook should expose versus what it should hide. → 이 연습은 훅이 노출해야 할 것과 숨겨야 할 것을 강조했습니다.

usePopcorn에서 커스텀 훅을 활용한 리팩토링

In the finished app, several domain‑specific hooks now encapsulate common logic:

• useMovies – fetches and manages movie data → 영화 데이터를 가져오고 관리
• useLocalStorage – synchronizes state with localStorage → 상태를 localStorage와 동기화
• useKey – handles keyboard shortcuts → 키보드 단축키를 처리

By moving useEffect, fetch logic, AbortController, event listeners, and localStorage handling into these hooks, components are now primarily responsible for rendering UI. → useEffect, fetch 로직, AbortController, 이벤트 리스너, localStorage 처리를 이러한 훅으로 옮김으로써, 컴포넌트는 이제 주로 UI 렌더링을 담당합니다.

회고

• This week wasn’t about learning many new concepts; it was about organizing existing knowledge. → 이번 주는 새로운 개념을 많이 배우는 것이 아니라, 기존 지식을 정리하는 것이었습니다.
• Clean React code isn’t about writing more code; it’s about designing better boundaries. → 깔끔한 React 코드는 더 많은 코드를 작성하는 것이 아니라, 더 나은 경계를 설계하는 것입니다.
• Not every week brings big new APIs or features—some weeks focus on refinement, structure, and maturity. → 매주 큰 새로운 API나 기능이 오는 것은 아니며, 어떤 주는 정제, 구조, 성숙도에 집중합니다.

Week 14 taught me that thoughtful architecture and reusable abstractions are as valuable as any new library. The usePopcorn project is now a finished piece of engineering, and I’m continuing to learn, improve, and move forward. 💪