프론트엔드 개발자 여러분~~
컴포넌트 잘 만들고 계신가요?
회사분들과 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>
```
- 코드가 직관적.
- 이 방식은 초반에 시간이 오래 걸림.
- 하지만 장기적으로 더 나은 효율성을 제공.
