React Component 설계

Dongjun Ahn·2022년 4월 22일
0

React Componet 설계를 시작하기 앞서 고민되는 부분이 항상 있다.
Page 컴포넌트 파일 하나에 UI, 로직(API호출, 이벤트함수, 비지니스로직, 상태관리, 예외처리 등등)을 다넣으면 안그래도 복잡하고 긴 코드가 더욱 눈에 안들어와서 유지보수가 힘들어진다.
그래서 새로운 프로젝트를 시작할때 프로젝트와 개발자에 맞게 패턴을 정하고 시작하는게 좋은것 같다.

앞전에 Atomic Design Pattern과 더불어 대표적인 패턴 몇가지 더 공부하고 선정하려한다.

Presentation Component - Container Component

React의 가장 기본적이고 유명한 디자인 패턴이다. Container Component에서 데이터를 처리하고 Presentation Component에서 데이터를 출력하는 형태이다.

Presentation Component

데이터 처리 능력없고 Dom 마크업과 스타일을 담당한다.
데이터 및 데이터와 관련된 콜백은 상위 Component의 props를 통해서 받는다.

Container Component

데이터를 처리하고 앱의 상태나 로직을 제어하는 역할.
렌더링 되어야 할 데이터를 props로 데이터 처리 능력이 없는 Presentational Component로 전달한다.

Component - Custom hooks

custom hooks 패턴은 기존 presentation, container 패턴에서 로직을 hooks로 관리하는걸 말한다. 기존 container에서는 공통 로직이 발생했을 때 다른 container 컴포넌트로 로직을 넘겨주지 못했는데, hooks로 로직을 관리하게 되면, UI 재사용을 넘어서 로직까지 재사용이 가능해진다

단일 코드

Presentation Component - Container Component 예제코드

Component - Custom hooks 예제코드

나의 결론

난 여태 공부한 Design Pattern을 모조리 섞어서 짬뽕해서 유연하게 쓸생각이다. (난 라면도 이것저것 다섞어서 먹는걸좋아한다)
Presentation Component는 props 를 받는 역할만 하고
Custom hooks를 Utils로 빼서 hook을 따로관리하여
Container에서 필요한 hook을 import하여 로직을 관리하도록 설계하였다.

components : page에 들어갈 Components (Atomic Design Pattern)
pages : Layout 포함 component page
containers : import component / import hooks + 데이터 가공 로직
hooks : 단일 로직

References

https://k39335.tistory.com/78
https://doiler.tistory.com/38

profile
Front-end Developer

0개의 댓글