compound component (5) 썸네일형 리스트형 컴파운드 컴포넌트 잘만들기 3탄 : compound component + uncontrolled component + co-location 삼신기 사용하기 컴파운드 컴포넌트 + uncontrolled component + co-location 삼신기로, API 컨슈머의 상태 관리 부담을 덜어줄 수 있습니다. 또한 전역 상태도 피할 수 있습니다. 원문 번역입니다 : https://jjenzz.com/avoid-global-state-colocate Avoid Global State — Co-locate with Uncontrolled Compound Components Over the years, I've thought a lot about colocation and how to effectively apply this principle to the components I build. I began to notice a pattern emerge in my .. 컴파운드 컴포넌트 잘만들기 2편 : Smarter, Dumb Breadcrumb 컴파운드 컴포넌트를 이용하여, 컴포넌트의 렌더링 위치에 관계없이 DOM을 원하는 곳에 삽입하는 방법을 배워봅니다. 원문 번역입니다 : https://jjenzz.com/smarter-dumb-breadcrumb Smarter, Dumb Breadcrumb With the help of React Context and Portals we can utilise the component tree to generate a breadcrumb trail that doesn't know your hierarchy or your location within it. jjenzz.com 이동 경로(Breadcrumbs)는 사용자가 웹사이트나 애플리케이션 내에서 자신의 위치를 찾는 데 도움이 되는 유용한 도구입니다. 컴파.. 리액트 디자인 패턴 : 컴파운드 컴포넌트 패턴 [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에 대해 알아보겠습니다. 이 패턴을 사용하면 클린하고 선언적인 방식으로 복잡한 컴포넌트를 작성할 수 .. 리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) TLDR : Compound Component 패턴은 컴포넌트에 (암시적으로 상태를 공유하는) 선언적 서브 컴포넌트 API를 제공하는 방법이다. 컴파운드 컴포넌트 패턴이란? 컴파운드 컴포넌트 패턴은 하나의 완벽한 컴포넌트를 구성하는 암시적 상태 공유 컴포넌트 API 집합을 제공하는 방법이다. 우리는 html의 select구성요소에서 이미 유사한 API를 본 적이 있다. Option 1 Option 2 아래 jsx와 차이가 뭘까? 가장 큰 문제는 스타일을 커스터마이징 하기 어렵다는 것일 것이다. 또한 내부에 다른 종류의 엘리먼트를 지원해야 하는 api들을 제공할 경우, 일은 더 복잡해진다. 위 케이스의 경우 각각의 option은 굉장히 유연한 api다. 반대로 아래 케이스의 경우 내부 컴포넌트의 refer.. [Epic React][Build an Epic React App][Compound Context] bookshelf/INSTRUCTIONS.md at exercises/08-compound-components · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background 재사용하려고 만든 컴포넌트들이 십중팔구 props가 너무 많아서 재사용하기 어렵게 된다. 컴포넌트를 Tab, Card, Modal과 같은 단위로 만들고 (Organisms?) 해당 컴포넌트 내.. 이전 1 다음
