Design Pattern 썸네일형 리스트형 [Javascript] React 디자인 패턴 design pattern presentational & container 로직을 수행하는 컴포넌트, UI를 보여주는 컴포넌트를 분리 앱의 기능과 UI구분이 쉬워짐 같은 state를 다른 container에게 props를 내림으로써 공유 로직수행, markup이 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어남. markup 변경에 매우 유연함 동일한 마크업, 컨테이너 레이아웃(header, footer 등)은 반복해서 작성하지 않고 구현 가능 presentational 사용자가 직접 보고 조작하는 컴포넌트 state를 직접 조작하지 않고, container component가 내려준 props함수에 의해 state를 변경 그에 따라 useState, useCallback 등 state관련 훅이 없어야함 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한.. 더보기 [Javascript] React 디자인 패턴 design pattern - atomic 분자단위로 UI 컴포넌트를 쪼개어 페이지를 구성하는 패턴 atoms - molecules - oraganisms - templates - pages 단계로 컴포넌트들을 결합 UI의 시맨틱적으로 가장 작은 단위의 요소들부터 쪼개서 조합하고, 기능적인 부분까지 결합하는 패턴 단계를 역으로 하여 분리시켜도 무방 간단명료하고 UI 복잡도를 억제, 중복컴포넌트를 방지하고 개발소요시간을 단축한다. 컴포넌트 개념에 대한 높은 이해도를 필요로 하기 때문에 러닝커브가 매우 높음 사소한 UI를 변경해야하는 컴포넌트 체계에 유연하지 않음 리액트 컴포넌트를 전반적으로 잘 이해해야하기 때문에 협업 시 쉽지않음 // Button.js import React from 'react'; const Button = (pr.. 더보기 이전 1 다음