React Pattern (3) 썸네일형 리스트형 리액트 디자인 패턴 : 선언적 컴포넌트 설계 (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.. 리액트 디자인패턴 : Render Props(렌더 프롭스 패턴) TLDR : 렌더 프롭 패턴 = 컴포넌트 내 비즈니스 로직(캡슐화) + 비즈니스 로직 결과물을 이용한 렌더링 hook과 함께 렌더 프롭스 패턴은 죽었다는 의견이 많다. 하지만 아직 활용처가 남아있다는 사람이 있다. 특정 조건에서는 Render Props Pattern이 hooks보다 낫다는 것이다. 바로 선택적 렌더링이다. 렌더 프롭은 선택적으로 렌더 체인을 단락하고 다른 view로 일찍 반환할 수 있다. 즉 렌더 로직을 바이패스하는 서킷 브레이커와 같은 역할을 하는 컴포넌트들의 체인을 만들 수 있다. either monad와 비슷하다고 보면 될 것이다. DIY : 토큰을 통해 유저 정보 가져오기 사용자 id를 통해 토큰의 존재 여부를 판단한다. type Token = string; type Id = n.. 리액트 디자인패턴 : Context Module Function (컨텍스트 모듈 함수 패턴) facebook의 코드베이스에서 자주 등장하는 패턴이라 합니다. Context Module Function 패턴은 유틸리티 함수로 reducer를 감싸는 패턴입니다. 목적 : 사용자에게 dispatch(action)를 숨깁니다. useContext훅은 순수한 dispatch 함수를 넘깁니다. utility함수는 해당 dispatch함수와 파라미터만 넘깁니다. 헬퍼 함수는 분명 다시 구현하게 될 객체 쓰레기입니다. 그냥 dispatch를 사용하세요. Dan on Twitter “@kentcdodds I intentionally said dispatch 🙂 dispatch is better than helper methods. Helper methods are object junk that we need t.. 이전 1 다음
