디자인 패턴 스터디

컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해 준다. 컴파운드 패턴을 처음 알게 된 것은 Radix 의 Dialog 컴포넌트에서 였다.Headless UI 라이브러리로 Radix 를 추천받아서 사용하기 위해 둘러보던 중 Dialog 컴포

고차 컴포넌트란 다른 컴포넌트를 받는 컴포넌트를 뜻한다. HOC는 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 가지고 있다. HOC는 로직이 적용된 엘리먼트를 반환하게 된다.compound 패턴으로 만든 Funnel 컴포넌트가 있다.<Funnel> 에 현재 s

리액트에서 Container/Presentational Pattern 을 사용하면 비즈니스 로직에서 뷰를 분리해낼 수 있다.요구사항 : 6개의 강아지 사진을 fetch 해서 화면에 보여주는 페이지 만들기어떤 데이터가 보여질 지에 대해 데이터를 다루는 컴포넌트 Cont

Render prop은 컴포넌트의 prop으로 전달되는 함수이며, 이 함수는 JSX 엘리먼트를 반환한다. 컴포넌트 자체는 아무것도 렌더링하지 않지만, render prop 함수를 호출하여 그 결과를 렌더링한다. render prop 함수를 호출할 때 인자를 전달할 수

Observer 패턴은 특정 객체의 상태 변화가 있을 때 이를 구독하고 있는 객체들에게 자동으로 알림을 전달하는 디자인 패턴입니다. Observable(혹은 Subject)은 특정 이벤트가 발생할 때 이를 Observer들에게 전파합니다.주로 이벤트 기반 프로그래밍에서