본문으로 이동
선언적인 코드 작성하기
문서

선언적인 코드 작성하기

박서진 · 토스 · 토스 기술 블로그

원본 보기

소개

선언적인 코드, 토스 프론트엔드 챕터는 어떻게 생각을 하고 있을까요?

AI 핵심 요약

토스 프론트엔드 챕터는 선언적인 코드를 추상화 레벨이 높아져 동작의 의도에 집중할 수 있는 코드로 설명합니다. 다만 추상화가 늘 좋은 것은 아니며, 회원가입 폼처럼 화면별 요구사항이 달라지면 공통 컴포넌트의 많은 props가 오히려 수정과 사용을 어렵게 만들 수 있습니다. 그래서 제품과 비즈니스 요구사항의 변화 가능성을 고려해 수정하기 쉬운 적절한 추상화 수준을 선택해야 한다고 강조합니다. 반복되는 오버레이 제어, 노출 감지, 클릭 로깅은 각각 `useOverlay`, `ImpressionArea`, `LoggingClick`으로 감싸 제어 흐름과 구현 세부사항을 숨깁니다.

  • 추상화는 반복되는 제어 흐름을 감추고, 사용하는 사람이 의도한 동작에 집중하게 합니다.
  • 공통 컴포넌트는 재사용 이점뿐 아니라 화면별 차이를 수용하는 비용도 함께 따져야 합니다.
  • 변경 가능성이 큰 요구사항을 미리 예측해 적절한 추상화 수준과 인터페이스를 선택하세요.
  • 오버레이, 노출 감지, 클릭 로깅처럼 반복되는 동작은 Hook이나 컴포넌트로 감싸면 사용 코드가 간결해집니다.