프론트엔드 개발자 여러분~~ 컴포넌트 잘 만들고 계신가요? 회사분들과 frontend mastery 스터디 하였는데요. 그중에 좋았던 내용을 요약해서 남겨보아요. 👉 https://frontendmastery.com/posts/building-future-facing-frontend-architectures/ ✅ 원문글을 여러번 읽어 보시는 것을 추천합니다. 컴포넌트를 만들때 보통 두가지 방법이 있음. # Top - Down (하향식 접근법) - 큰 문제를 정의하고, 세부적인 문제를 찾아 해결 - 큰 문제를 분해하면 해결해야 하는 문제를 찾을 수 있다는 사고 방식 SideNavigation 컴포넌트 만든다고 가정했을때 보통 아래와 같은 개발을 하게 됨. ``` const navItems = [ { label: 'Home', to: '/home' }, { label: 'Dashboards', to: '/dashboards' }, { label: 'Settings', to: '/settings' }, ] ... <SideNavigation items={navItems} /> ``` [추가요구사항] - Draggable - 중첩메뉴 - 특정 메뉴사이에 separator 추가 등등 추가요구사항을 <SideNavigation /> 컴포넌트는 구현 했을때 모놀리틱한 컴포넌트로 변화하기 시작합니다. 거대해 지며 유지보수가 힘들어 생산성에 악영향을 줍니다. --- # Bottom - Up (상향식 접근법) - 세부적인 문제를 해결하여 전체 문제의 답을 찾는 방법 - 작은 문제를 해결하다보면 자연스럽게 문제가 해결된다는 사고 방식 위에서 예로 들었던 <SideNavigation />의 추가 요구사항을 Bottom - Up방식으로 구현해보면? ``` <SideNavigation> <Section> <NavItem to="/home">Home</NavItem> <NavItem to="/projects">Projects</NavItem> <Separator /> <NavItem to="/settings">Settings</NavItem> <LinkItem to="/foo">Foo</NavItem> </Section> <NestedGroup> <NestedSection title="My projects"> <NavItem to="/project-1">Project 1</NavItem> <NavItem to="/project-2">Project 2</NavItem> <NavItem to="/project-3">Project 3</NavItem> <LinkItem to="/foo.com">See documentation</LinkItem> </NestedSection> </NestedGroup> </SideNavigation> ``` - 코드가 직관적. - 이 방식은 초반에 시간이 오래 걸림. - 하지만 장기적으로 더 나은 효율성을 제공.