React listViewComponent 사용해보기

npm i @syncfusion/ej2-react-lists@19.4.55

19.4.55 버전을 사용하겠습니다.

 

1. cmd 창에서 이 명령어를 실행해서 프로젝트에 install 받는다.

npm install @syncfusion/ej2-react-lists --save

2. listView 컴포넌트를 아래 소스와 같이 import 시켜주고 선언한 App 아래에 return 안에 추가해준다.

import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './App.css';
const App = () => {
        return (
        //specifies the tag to render the ListView component
        <ListViewComponent id='list'/>);
}

데이터 소스는 <ListViewComponent dataSource={데이터}> 에 넣어주면 출력된다.

 

데이터 바인딩을 하려면 ref를 생성해서 선언해준후에 데이터 가공 후 넣어주면된다 .

 

const testData= {  
 { VALUE : 'SEQ1', TEXT : '내용1', child : [{VALUE : 'SEQ1_1', TEXT : '내용1_1'}]}       
,{VALUE : 'SEQ2', TEXT : '내용2', child : [{VALUE : 'SEQ2_1', TEXT : '내용2_1'}]}
}

<ListViewComponent dataSource={testData} fields={{value : 'VALUE' , text : 'TEXT'}}>

 

child는 타고들어갈수있는 자식 리스트를 생성한다. (Level)

 

listViewComponent 출력 모습!

listView 데이터 넣어줬을떄 형태

listViewComponent 내용 1 클릭 모습!

내용1의 child 데이터

 

listViewComponent를 사용해 보았습니다~