자바스크립트 + 리액트 디자인 패턴

326

자바스크립트 + 리액트 디자인 패턴

window

를 사용하여 약

20

~

30KB

(

gzip

압축 기준 ) 정도를 줄일 수 있었습니다. 두 패키지

의

API

는 유사하지만,

react

-

window

가 더 사용하기 쉽습니다.

다음은

react

-

window

의 주요 컴포넌트입니다.

12.11.2

List

컴포넌트

List

컴포넌트는 윈도잉된 리스트의 아이템을 렌더링합니다. 즉, 화면에 보이는 행만 사용

자에게 전달됩니다.

List

컴포넌트는 내부적으로

Grid

컴포넌트를 사용하여 행을 렌더링

하고,

prop

을 전달합니다. 다음 예시 코드를 통해 리액트에서 리스트를 렌더링하는 방식과

react

-

window

를 사용하는 방식의 차이점을 살펴봅시다.

우선 리액트를 사용한 간단한 데이터 리스트(

itemsArray

) 렌더링입니다.

import React from "react";

import ReactDOM from "react-dom";

const itemsArray = [

{ name: "Drake" },

{ name: "Halsey" },

{ name: "Camila Cabello" },

{ name: "Travis Scott" },

{ name: "Bazzi" },

{ name: "Flume" },

{ name: "Nicki Minaj" },

{ name: "Kodak Black" ...