REACT 리액트 - x 누르면 사라지는 창, Carousel

웹을 사용하다 보면, x 를 누르면 자연스럽게 사라지는 창을 쉽게 볼 수 있다. 팝업창인 경우도 있고, 그렇지 않은 경우도 있는데, React 에서는 Reactstrap 의 UncontrolledAlert 를 사용해서 이뤄낼 수 있다.

소스는 다음과 같다. 

import React from 'react';
import { UncontrolledAlert } from 'reactstrap';

function App(){
	return(
		<div>
        		<UncontrolledAlert color="warning">
            			내용작성
        		</UncontrolledAlert>
		</div>
	)
}

export default App;

컬러 속성은 primary, secondary, success, danger, warning, info, light, dark 가 있다.

---

리액트에서도 Carousel 즉 자동으로 다른 배너로 교체되는 방식의 디자인을 손쉽게 짤 수 있다. 기본형은 다음과 같은 소스를 가진다. 

import React from 'react';
import { UncontrolledCarousel } from 'reactstrap';

const items = [
	{
    	src: '이미지주소',
        altText: '이미지 대체 문구',
        header: '제목',
        caption: '캡션(설명)'
	},
	{
    	src: '이미지주소',
        altText: '이미지 대체 문구',
        header: '제목',
        caption: '캡션(설명)'
	},
	{
    	src: '이미지주소',
        altText: '이미지 대체 문구',
        header: '제목',
        caption: '캡션(설명)'
	}    
];

function App() {
	return (
		<UncontrolledCarousel items={items} />
	)
}

export default App;

이렇게하면 된다. 배너 및 설명을 늘리고 싶다면 const items 안에 있는 내용만 , 찍고 늘리기만 하면 된다. 참 쉽다. 이미지 사이즈에 따라 자동으로 조절된다.