vac pattern (1) 썸네일형 리스트형 리액트 디자인패턴 : 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 ".. 이전 1 다음
