design pattern (15) 썸네일형 리스트형 리액트 디자인 패턴 : 컴파운드 컴포넌트 패턴 [Compound Component Pattern] 2 리액트 디자인 패턴 : 컴파운드 컴포넌트에 관해 알아봅니다. 원문 : https://isamatov.com/compound-components-react/ Compound Component – advanced React pattern UI libraries love Let's take a look at an advanced React pattern - Compound Component. This pattern is widely adopted by a lot of popular UI libraries. isamatov.com 이번 포스트에서는 널리 사용되는 React 패턴인 Compound Component에 대해 알아보겠습니다. 이 패턴을 사용하면 클린하고 선언적인 방식으로 복잡한 컴포넌트를 작성할 수 .. 리액트 디자인 패턴 : 선언적 컴포넌트 설계 (declarative component design) 어떤 컴포넌트가 선언적인가? 어떻게(how) 보여줄까가 아닌 무엇을(what) 보여줄까 아래 글의 도입부에서 명령형 컴포넌트와 선언형 컴포넌트를 다룹니다. https://tech.kakaopay.com/post/react-query-2/ React Query와 함께 Concurrent UI Pattern을 도입하는 방법 | 카카오페이 기술 블로그 카카오페이에서 React Query를 활용하여 Concurrent UI Pattern을 도입한 사례에 대해 소개합니다. 이 글은 연작 중 2편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2 tech.kakaopay.com 아래는 명령형 컴포넌트입니다. import { useState, useEffect } from.. The Difference Between VAC(View Asset Component) Pattern and Container/Presenter Pattern https://www.patterns.dev/posts/presentational-container-pattern/ Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic www.patterns.dev https://wit.nts-corp.com/2021/08/react에서-view의-렌더링-관심사-분리를-위한-vac-패턴-소개/ React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 | WIT블로그 React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 시작하며 FE개발에서 View는 정보의 시각화 뿐만 아니라 사용자와 상호작용.. 리액트 디자인 패턴 : Container pattern (컨테이너 패턴) 데이터 가져오기, 인증, 레이아웃 제공 등과 같은 커스텀 기능을 재사용하는 선언적 방법을 구현할 수 있습니다. 컨테이너 패턴이란? 커스텀 기능을 제공하고 children prop으로 전달된 React 노드를 렌더링하는 컨테이너 컴포넌트를 사용합니다. 패턴의 일부 사용 사례는 다음과 같습니다. 로더 - 컨테이너는 특정 조건이 true인 동안 로더를 표시하고, 그렇지 않으면 콘텐츠를 렌더링합니다. 인증 게이트 - 사용자가 인증되지 않은 경우 컨테이너는 자식을 렌더링하지 않습니다. 레이아웃 및 스타일 제공 (플레이스홀더) - 컨테이너는 일관된 스타일을 제공하는 래퍼 역할을 합니다. 콘텐츠가 다른 여러 대시보드 페이지 컴포넌트가 있고, 각 페이지에 동일한 레이아웃을 제공하고 싶을 때 사용합니다. 컨테이너 패턴 .. 리액트 디자인패턴 : Layout Component (레이아웃 컴포넌트 패턴) TLDR : 레이아웃 컴포넌트 패턴은 불필요한 렌더링을 없애 성능을 개선한다. 컴포넌트 트리의 높이를 낮추어 props drilling의 고통을 해결하고, 유지보수성을 향상시킨다. 사람들이 간과하는 리액트의 성능 최적화 팩터 당신의 리액트 앱을 느리게 하는 실수 위 두가지 게시물이 지적하는 요소는 컴포넌트의 위치다. 자주 바뀌는 공통 상태가 위에 있을 수록 하위 컴포넌트들은 더 많이, 자주 그려질 가능성이 크다. 이를 피하기 위한 방법은 다음과 같다 리렌더링이 불필요한 엘리먼트를 리렌더링 하지 않는다. 리렌더링을 유발하는 관심사에 따라 컴포넌트를 분리한다. 당신의 리액트 앱을 느리게 하는 실수에서 글쓴이는 일반인들이 컴포넌트를 구조화하는 방식을 지적한다. function App() { return (.. 리액트 디자인패턴 : View Asset Component (VAC 패턴) TLDR : 렌더링의 관심사를 분리하여 stateless component를 만든다. https://wit.nts-corp.com/2021/08/11/6461 이미 너무 좋은 글이 있지만, 데이터 페치와 렌더링 관심사 분리 관점에서 해당 패턴을 소개해본다. 해당 패턴은 사실 이전에 존재하던 컨테이너-프리젠터 패턴의 fancy-alias일 뿐이다. 최근에 스켈레톤 컴포넌트를 만들 일이 있었다. 즉 로딩 시에 대체 컴포넌트를 보여주는 것이다. 위 예제 링크 간단하게 생각하면 원래 위치의 빵꾸에 가짜 데이터를 넣으면 될 것이다. 하지만 보통 props drilling을 피하기 위해 아래와 같이 컴포넌트 안에 query 로직을 집어넣는다. import "../App.css"; import axios from ".. 리액트 패턴 : Derived State - 파생(계산된) 상태 활용하기 원문 보기 상태 관리는 웹 애플리케이션을 구축하고 확장하는 데 있어 가장 어려운 부분입니다. 나는 개발자들이 주로 건전한 상태 관리 기계를 작성하는 일을 하며 돈을 받는다 생각합니다. 다른 모든 부분은 UI 라이브러리와 NPM 패키지를 사용하여 아웃소싱하거나 자동화할 수 있습니다. 이 포스트에서는 과소평가되고 있다고 생각되는 "파생 상태"라는 상태 관리 기술에 대해 다루고자 합니다. 많은 경우 상태 관리 논리를 단순화할 수 있습니다. 파생 상태 기술은 라이브러리에 구애받지 않으며 Redux, MobX 및 React의 built-in 훅에 적용할 수 있습니다. 파생 상태("Derived State")는 뭔가요? 이전에 정의된 상태들을 통해 계산할 수 있는 상태입니다. 이전 정보로 계산할 수 있는 정보는 상.. 이전 1 2 다음
