앱을 유지보수하는 데 가장 많이 도움되는 것은 디자인 패턴인 것 같다.
처음 만들 때 제대로 잡아놔야 유지보수가 쉽고, 다른 사람도 보기 편-안하다.
오늘은 React에 어떤 디자인 패턴이 있는지 알아보고, 스스로 어떻게 쓰고 있는지 얘기해보고자 한다.
React 디자인 패턴
1️⃣ Presentational and Container Component Pattern
가장 유명한 패턴이기도 하고, 이제는 구식에 가까운(?) 아무튼 나는 잘 쓰고 있는 패턴이다.
Presentaitional 컴포넌트는 화면에 보여지는 것 (즉, UI) 부분만 담당하는 컴포넌트이다.
데이터는 항상 Container 단에서 받아서, 사용자에게 보여질 것만 presenter 단에서 처리한다.
Container 컴포넌트는 동작과 데이터를 담당하는 컴포넌트이다. 따라서 DOM 마크업 구조나 스타일을 가지지 않는다.
ex)
// ViewContainer
const ViewContainer = () => {
<ViewPresenter />
}
// ViewPresenter.tsx
const default () => {
return (
<View>
<Text>ViewPresenter</Text>
</View>
)
}위의 코드처럼 Container와 Presenter의 관심사를 따로 분리하는 디자인 패턴이다.
장점
1. 관심사 분리를 잘할 수 있다.
데이터와 스타일이 분리되어 있기 때문에 UI를 더 쉽게 만들 수 있다.
2. 재사용성을 높일 수 있다.
다른 화면에서도 해당 화면이 필요할 때 이를 재사용할 수 있다.
이제는 추천하지 않는 이유
해당 패턴은 Dan Abramov가 소개한 패턴으로, 더 이상은 자신이 소개한 패턴으로 컴포넌트를 나누는 것을 추천하지 않는다고 한다.
왜냐하면 이제는 이 패턴이 아니여도 hook을 사용해서 로직을 분리할 수 있기 때문이다.
하지만! 나는 아직 여전히 잘쓰고 있다. hook을 사용해서 로직을 분리한 후, container에서 해당 로직들과 동작들을 시켜주고 있기 때문이다.
어느 정도 각자 수용할 것은 수용하고, 버릴 것은 버리면 된다고 생각한다.
2️⃣ Atomic Design Pattern
- 해당 패턴은 원채 디자인 시스템을 위한 구조로 컴포넌트들을 효율적으로 구성하는 방식을 의미한다.
Atomic Design Pattern은 컴포넌트를 뷰가 아닌 기능 단위로 나눈다.
<UI 구성 요소>
Atom -> Molucule -> organisms -> template -> page
각각 살펴보기로 하자.
Atom
- 하나의 구성 요소
ex) form label, inputs, buttons과 같은 basic html elements
Molecules
- Atom이 모여서 만들어진 하나의 구성 요소
ex) input label + button
Organisms
- 분자들(Molecules)의 모음으로 서로 동일하거나 다른 분자들로 구성된다.
Templates
- 유기체(Organisms)를 모아 템플릿으로 생성. 페이지의 기본 내용 구조에 초점을 맞춘다.
Pages
- 실제 콘텐츠가 배치된 UI 모습을 보여주는 인스턴스이다.
Pages 단위에서 상태 관리가 이뤄져야 한다. ex) redux, input onChagne를 useState로 관리
기존에는 Presentational and Container Component Pattern만 사용하다가 디자인 시스템에 고안된 Atomic Design Pattern도 같이 사용하는 중인데 디자인 관점에서 하나 하나 보게되어 조금 더 재사용성을 생각하며 View를 짜게 된다.
하지만, 하나하나 Atom으로 분리하기에는 너무 많은 컴포넌트를 만들어야 할지도 모른다.. ㅎ
Atomic Design Pattern을 사용하면서 조금 더 깔끔하게 UI를 구성하기 위해 노력하게 되는 것 같아서 다른 사람에게도 알리고 싶은 디자인 패턴이다.
익숙해지는 데에는 시간이 조금 걸릴지 몰라도 도입하면 뷰가 깔끔해져 기분이 좋아지는 마법 🌷
Reference
React Design Pattern 🎨 https://velog.io/@holim0/React-Design-Pattern