[실전] 시스템 설계 3 (18일차)

<Class Diagram 설계 for 프론트 엔드>

1. 프론트 엔드 설계란?

• 프론트엔드의 아키텍처를 설계할 수도 있고, 컴포넌트 간 의존 관계를 나타내는 다이어그램을 그려볼 수도 있다.
• 더치페이의 프론트엔드 아키텍처 자체는 심플하기 때문에, 리액트 컴포넌트 간의 의존성을 나타내기 위한 클래스 다이어그램을 그려보는 것이다.

2. 설계를 잘하기 위한 팁?

2-1. 페이지별로 컴포넌트를 정의한다.

2-2. UI 디자인을 살펴보면서 한 페이지 당 재사용이 가능한 공통된 요소들이 있는지 파악한다.

• 공통된 요소들에 대해 컴포넌트화하기 (DRY;Don’t Repeat Yourself 원칙; 중복 코드를 줄이기 위해서 반복하지 말라)
  • → 페이지 별로 컴포넌트를 계층화 해서 트리 구조로 잡아나갈 수 있다.

2-3. 사용할 만한 컴포넌트 디자인 패턴은 어떤 것이 있는가?

2-3.1) Container 패턴

• UI를 렌더링하는데에 집중하는 컴포넌트이다.
  • ex. HTML 렌더링 집중
• 데이터 불러오기 등의 비지니스 로직을 담아둘 Container 컴포넌트로 나눠 설계한다.

// 자주 사용하는 Container 패턴

const GroupDetail = (group) => {
return (
<>
<h1>{group.name}</h1>
...
</>
)
}

const GroupDetailContainer = (groupId) => {
let group = {}
useEffect(() => {
group[name] = /* fetch from API call */}, [groupId])

useEffect(() => {
group[meta] = /* fetch from API call */}, [groupId])

/* handle other business logic to render GroupDatail UI */
...
return <GroupDatail group={group} />
}

2-3.2) Provider 패턴

• 컴포넌트 내 props drilling (프로퍼티 내리꽂기; 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 중 하나로, props를 오로지 하위 컴포넌트로 전달하는 용도로만 사용)을 방지하고자 생긴 패턴
• React Context나 Redux/Recoil과 같이 중앙 상태 관리를 이용하여 데이터를 저장해 두고, 필요한 모든 컴포넌트 (i.e. Consumer)에서 이 데이터에 접근 가능하도록 한 패턴

const ThemeContext = React.createContext ('dark');
// 테마를 담고 있는 context를 만들어줌 -> 디폴트 값: dark

const App = () => {
return (
<ThemeContext.Provider value="dark-green">
// context를 하위에 있는 모든 component가 value에 접근 할 수 있게 함

<GroupDetailContainer groupId={2} />
<ThemeContext.Provider>
)}

const GroupDetail = (groupId) => {
let group = {}
useEffect(() => {
group[name] = /* fetch from API call */}, [groupId])

useEffect(() => {
group[meta] = /* fetch from API call */}, [groupId])

*/ handle other business logic to render GroupDetail UI */}
...

render <GroupDatail group={group} />

const GroupDatail = (group) => {
const theme = useContext(ThemeContext)
return (
<Overlay theme={theme}>
<h1>{group.name}</h1>
</Overlay>
)
}

2-4. 코드 구현 전 생각해 보기

• 각 컴포넌트에 최소한으로 필요한 props는 무엇일지 정의
• 어떤 데이터들을 컴포넌트들 끼리 주고받아야 할 지 생각
• 각 컴포넌트 별로 state/props를 미리 생각해보는 것도 도움이 된다.
• 한 컴포넌트가 하나의 책임만 가지고 있는지 확인 (Single Responsibility Principle)
  • ex) 더치페이 - 한 컴포넌트 내에서 그룹 생성하는 것 뿐만 아니라 그룹을 삭제하는 UI/로직까지 담고 있다면 이 컴포넌트는 너무 많은 것을 핸들링 하려고 하는 것이기 때문에 쪼개는 것이 좋다.
    • 읽어보면 좋을 자료: https://reactjs.org/docs/thinking-in-react.html

3. 설계에 앞서 준비하기

• 강의에서는 Plant UML 사용
• 리액트 컴포넌트/클래스의 구조도를 설계

4. 시작하기

• 자바 설치
• GraphViz 설치
• VS Code marketplace에서 PlantUML 플러그인 설치
• 프로젝트 폴더 아래에  /docs 폴더 생성
• react_component_diagram.plantuml 파일 생성
• UI 디자인을 보면서 Component화 할 수 있는 것들을 추려내기
• Component 간의 구조 정의하기 (e.g. 상속, 조합)

5. Class diagram for 프론트 엔드

• 반드시 class가 아니어도 괜찮음
• 객체 다이어그램을 활용함

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0