리액트 패턴 (3) 썸네일형 리스트형 리액트 디자인패턴 : Control Props (컨트롤 프롭스 패턴) State-Reducer-Pattern 리액트 디자인패턴 : State Reducer Pattern (스테이트 리듀서 패턴) IOC : 제어의 역전 https://itchallenger.tistory.com/261?category=1063253 제어의 역전(IOC : Inversion of Control) in React 원문 보기 사용 중인 루틴에 기능을 추가해달라는 요청을 받게 되면? 리액트 컴포.. itchallenger.tistory.com 해당 게시글에서 훅 내부의 리듀서를 오버라이딩 하는 방법을 배웠다. 때로는 훅 내부의 상태를 전적으로 외부에서 관리하고 싶을 수 있다. TLDR : State Reducer 패턴과 동일하게 리듀서 오버라이딩 onChange 콜백을 이용해 외부 상태관리 지원 .. 리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) TLDR : Compound Component 패턴은 컴포넌트에 (암시적으로 상태를 공유하는) 선언적 서브 컴포넌트 API를 제공하는 방법이다. 컴파운드 컴포넌트 패턴이란? 컴파운드 컴포넌트 패턴은 하나의 완벽한 컴포넌트를 구성하는 암시적 상태 공유 컴포넌트 API 집합을 제공하는 방법이다. 우리는 html의 select구성요소에서 이미 유사한 API를 본 적이 있다. Option 1 Option 2 아래 jsx와 차이가 뭘까? 가장 큰 문제는 스타일을 커스터마이징 하기 어렵다는 것일 것이다. 또한 내부에 다른 종류의 엘리먼트를 지원해야 하는 api들을 제공할 경우, 일은 더 복잡해진다. 위 케이스의 경우 각각의 option은 굉장히 유연한 api다. 반대로 아래 케이스의 경우 내부 컴포넌트의 refer.. 리액트 패턴 : 타입스크립트를 활용해 as Props 사용하기 원문 보기 React polymorphic components with TypeScript Polymorphic components is a powerful React pattern for controlling how your components render in DOM. isamatov.com 폴리모픽 컴포넌트 패턴은 매우 유명한 리액트 패턴 중 하나입니다. 컴포넌트를 as를 사용하여 button을 a, div로 사용할 수 있게 해줍니다. TypeScript와 제네릭을 사용하여 강력한 타입 체킹이 더해진 다형적 컴포넌트를 작성하는 방법을 살펴보겠습니다. Overview of polymorphic components (폴리모픽 컴포넌트 개요) API가 어떻게 사용되는지를 확인합니다. 버튼이 a 태그처럼 .. 이전 1 다음
