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

안녕하세요.

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

 

요즘 자바스크립트 공부를 마치고, react 공부를 열심히 하고 있는데요.

그 중에서도 수월하게 react를 사용할 수 있게 해주는 reactstrap을 접하고 있습니다.

이번 포스팅에서는 reactstrap 기능 중 'Fade' 기능에 대해 알려드리겠습니다.

따로 인강을 보지 않아도 react 할 수 있어요! (스스로 최면 거는 중)

 

 

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

아니라면 해당 링크를 눌러 reactstrap을 설치해 주세요.

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

 

  Fade?

특정 영역을 서서히 보여주고 숨기는 기능입니다.

갑자기 뚝뚝 나타났다가 사라지는 것보단 이런 효과가 좋겠죠?

 

 

1. App.js 작성하기

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

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

export default App;

 

 

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

클래스형 컴포넌트로 작업 중이신 분들은 아래 내용을 따라해 주세요.

import React, { Component } from 'react';
import { Button, Fade } from 'reactstrap';

class FadeMode extends Component {
    constructor (props) {
        super(props);
        this.state = { fadeInOut: true }
    }

    toggle = (e) => {
        this.setState({ fadeInOut: !this.state.fadeInOut})
    }

    render() {
        return (
            <div>
                <Button color="primary" onClick={this.toggle}>
                    Fade In/Out
                </Button>
                <Fade in={this.state.fadeInOut} tag="h1">
                    나도 리액트 할 수 있다! 뚝딱!
                </Fade>
            </div>
        )
    }
}

export default FadeMode;

 

 

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

함수형 컴포넌트로 작업 중이신 분들은 아래 내용을 따라해 주세요.

import React, { useState } from 'react';
import { Button, Fade } from 'reactstrap';

function FadeMode() {
    const [fadeInOut, setFadeInOut] = useState(true)

    return (
        <div>
            <Button color="primary" onClick={() => setFadeInOut(!fadeInOut)}>
                Fade In/Out
            </Button>
            <Fade in={fadeInOut} tag="h1">
                나도 리액트 할 수 있다! 뚝딱!
            </Fade>
        </div>
    )
}

export default FadeMode;

 

 

3. 브라우저 확인

파란색 버튼을 누르면 텍스트가 서서히 나왔다가, 다시 파란색 버튼을 누르면 텍스트가 서서히 사라집니다.

toggle 기능을 하고 있어요.

 

 

4. 출처 및 추가내용

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

reactstrap - Alerts