[리액트 React] 실무에서 유용하게 사용되는 reactstrap Alerts

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 reactstrap의 Alerts에 대해 다뤄볼게요.

alert은 유효성 검사할 때마다 꼭 들어가는 건데, 정말 유용하게 사용하겠죠?

지금부터 가독성을 위해 문어체로 작성하겠습니다.

 

✋🏼 잠깐만! 이 글을 보기 전에, reactstrap 설치는 했나요?

아니라면 해당 링크를 눌러 reactstrap을 설치하기

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유

 

 

1. App.js 작성하기

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Alerts from './Alerts';

function App() {
	return(
		<div>
			<Alerts />
		</div>
	)
}

export default App;

 

 

2-1. 클래스형 컴포넌트 Alerts.js 작성하기

import React, { Component } from 'react';
import { Alert } from 'reactstrap';

class Alerts extends Component {
    render() {
        return(
          <div>
            <Alert color="primary">
              This is a primary alert with
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="secondary">
              This is a secondary alert with
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="success">
              This is a success alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="danger">
              This is a danger alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="warning">
              This is a warning alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="info">
              This is a info alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="light">
              This is a light alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
            <Alert color="dark">
              This is a dark alert with 
              <a href="#" className="alert-link">an example link</a>
              . Give it a click if you like.
            </Alert>
          </div>
        )
    }
}

export default Alerts;

 

 

2-2. 함수형 컴포넌트 Alerts.js 작성하기

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

const Alerts = (props) => {
  return (
    <div>
      <Alert color="primary">
        This is a primary alert with
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="secondary">
        This is a secondary alert with
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="success">
        This is a success alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="danger">
        This is a danger alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="warning">
        This is a warning alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="info">
        This is a info alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="light">
        This is a light alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
      <Alert color="dark">
        This is a dark alert with 
        <a href="#" className="alert-link">an example link</a>
        . Give it a click if you like.
      </Alert>
    </div>
  );
};

export default Alerts;

 

 

3. 브라우저 확인

 

 

4. 출처 및 추가내용

해당 링크를 들어가보면 close 버튼을 추가하는 방법, alerts이 서서히 사라지게 하는 방법들이 자세하게 나와있다.

reactstrap - Alerts