Personal-Study/UI Component Patterns8 [UI Component] Design Patterns - Mixin Mixin - Mixin: 상속 없이 객체나 클래스에 재사용 가능한 기능을 추가할 수 있는 객체 - 단독으로는 사용 불가 - Object.assign()을 이용하여 믹스인 (추가) 기능을 프로토타입에 추가 가능 - 믹스인 자체는 상속 가능 - Window 객체는 WindowOrWorkerGlobalScope와 WindowEventHandler의 믹스인으로 구성되어 있어서 setTimeout, setInterval, indexedDB, isSecureContext와 같은 프로퍼티 사용 가능 - 믹스인 자체를 직접적으로 사용 불가 - ES6 문법 이전 믹스인은 React에서 컴포넌트에 기능을 추가하기 위해 종송 사용했었음 하지만 믹스인이 복잡도를 증가시키고 재사용하기 어렵게 만든다고 해서 지금은 훅에 의해 .. 2023. 11. 1. [UI Component] Design Patterns - Module Module - 코드를 재사용 가능하면서 작게 나눔 - 모듈 스코프 내에 변수를 선언하고 명시적으로 외부에 export 하지 않으면 해당 변수 접근 불가 -> 전역 스코프의 변수들과 이름이 충돌하는 문제 줄일 수 있음 - named export - 명시적으로 export한 값들만 외부에 노출됨 - import할 때 as 키워드를 통해 import한 값의 이름 변경 가능 - export 키워드를 사용한 선언들 중에 하나를 default export 할 수 있음 -> import할 때 중괄호 없이 바로 사용 가능, 자유롭게 이름 변경 가능 - *를 사용하여 모든 것들을 한번에 import하여 객체 형태로 사용 가능 - Dynamic import: 특정 조건에서만 특정 모듈 로드할 수 있음 - 모듈을 동적으로.. 2023. 10. 31. [UI Component] Design Patterns - Container/Presentational Container/Presentational - 비즈니스 로직으로부터 뷰를 분리하여 관심사 분리를 강제함 - Container Component - Presentational 컴포넌트에게 데이터 전달 - 화면에 아무것도 렌더링하지 않음 (스타일 시트 포함 X) - Presentational Component - props를 통해 데이터를 받음 - 받은 데이터를 화면에 표현 (스타일 시트 포함), 데이터는 건드리지 않음 - Container/Presentational 패턴은 React Hooks로 대체 가능 - Container 컴포넌트 없이도 stateless 컴포넌트 쉽게 만들 수 있음 - useState, useEffect 이용해서 데이터 fetch 하는 커스텀 훅 별도 생성 - 장점 - 관심사 분리.. 2023. 10. 24. [UI Component] Design Patterns - Provider Provider - 여러 자식 컴포넌트 간에 데이터를 공유함 - props drilling (안티 패턴) 막을 수 있음 - 데이터가 필요하지 않는 컴포넌트는 props를 받지 않도록 수정하는 것이 바람직함 - 각 레이어에 직접 데이터를 주지 않고도 여러 컴포넌트들에게 데이터에 접근할 수 있게 구현 가능 - 전역 데이터를 공유하기 좋음 ex) UI 테마 - 특정 상황에서 성능 이슈 발생 가능 - 컨텍스트를 참조하는 모든 컴포넌트는 컨텍스트 변경시마다 모두 리렌더링됨 - 컴포넌트 쓰지 않는 값의 업데이트로 인해 불필요하게 렌더링되는 것을 막기 위해 여러 Provider로 쪼갤 필요 있음 - 예시 // App.js export const themes = { light: { background: "#fff", .. 2023. 10. 24. 이전 1 2 다음 반응형