나를 위한 글(6): 매우 쓸만한 react용 컴포넌트 TOP 4

 

잘 만들어진 컴포넌트는 개발의 속도를 높여주니 야근을 안 할 수 있게 되고 그로 인해 종국엔 삶의 질도 높여줍니다.

여기 매우 잘 만든 4가지 react 전용 컴포넌트를 소개합니다.

---

React Beautifule Dnd

atlassian/react-beautiful-dnd

React Beautifule Dnd는 깔끔하고 쉽게 사용이 가능한 드래그 앤 드랍 리스트를 만들 때 사용하면 좋은 컴포넌트입니다.

관심이 있으신 분들은 이 깃헙이나 무료 강의를 참고하세요.

 

Install

npm install react-beautiful-dnd --save

 

Usage

 

https://codesandbox.io/embed/k260nyxq9v?fontsize=14&hidenavigation=1&theme=dark

vertical list - CodeSandbox

 

Sweetalert2

Sweetalert2는 JS 팝업 박스들을 대체할 너무나도 아름답고 반응형이면서 커스텀마이징도 가능한 컴포넌트입니다.

 

sweetalert2/sweetalert2

Install

npm install --save sweetalert2

 

Usage

 

import Swal from 'sweetalert2/dist/sweetalert2.js';
import 'sweetalert2/src/sweetalert2.scss';Swal.fire('Oops...', 'Something went wrong!', 'error');

 

 

React Big Calendar 

React Big Calendar는 모던 브라우저 전용 클래식한 테이블 형태의 캘린더입니다.

 

jquense/react-big-calendar

 

Install

npm install react-big-calendar

 

Usage

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

const localizer = momentLocalizer(moment);

const MyCalendar = props => (
<div>
<Calendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
/>
</div>
);

 

React Virtualized

React Virtualized는 수많은 리스트 데이터들을 효과적으로 렌더링하는 데 도움이 되는 컴포넌트입니다. 

 

 

 

Install

npm install react-virtualized --save

 

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {List} from 'react-virtualized';// List data as an array of strings
const list = [
'Brian Vaughn',
// And so on...
];

function rowRenderer({
key, // Unique key within array of rows
index, // Index of row within collection
isScrolling, // The List is currently being scrolled
isVisible, // This row is visible within the List (eg it is not an overscanned row)
style, // Style object to be applied to row (to position it)
}) {
return (
<div key={key} style={style}>
{list[index]}
</div>
);
}

// Render your list
ReactDOM.render(
<List
width={300}
height={300}
rowCount={list.length}
rowHeight={20}
rowRenderer={rowRenderer}
/>,
document.getElementById('example'),
);

---

 

* 원문출처:

https://medium.com/javascript-in-plain-english/here-are-5-useful-react-components-fb3927e7d790

Here Are 5 Useful React Components