9-4. Progress 컴포넌트 준비하기

WritePost 컴포넌트의 하단부에 위치하는 게이지바는 Progress 라는 컴포넌트입니다. 이 컴포넌트에 기능을 붙여주기 전에, 먼저 게이지가 0부터 100까지 차는것을 구현해보겠습니다.

구현 방식은 생각보다 간단합니다.

엘리먼트의 넓이를 기본적으로는 0% 로 설정하고, 그 다음에 setState 를 통하여 100% 으로 설정을 합니다. 이 때, transition CSS 속성을 통하여 애니메이션 시간을 설정해주면 됩니다.

setState 가 될 때 동시에, setTimeout 을 통해 1초 후 특정 함수가 실행되게 하면 됩니다.

그럼 한번 구현을 해볼까요?

src/components/WritePost/Progress.js

import React, { Component } from 'react';
import styled from 'styled-components';
import oc from 'open-color';

const Wrapper = styled.div`
    background: ${oc.cyan[4]};
    height: 4px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: ${props => props.percentage + '%'};
    ${props => props.percentage !== 0 && `transition: all 1s ease-in-out;`}
`;

class Progress extends Component {
    state = {
        percentage: 0
    }

    componentDidMount() {
        this.setState({
            percentage: 100
        });
        setTimeout(() => {
            console.log('done');
        }, 1000);
    }

    render() {
        const { percentage } = this.state;

        return (
            <Wrapper percentage={percentage}/>
        )
    }


}
export default Progress;

styled 컴포넌트에 percentage 라는 props 를 전달하여 이 값에 따라 스타일을 설정하도록 하였습니다.

${props => props.percentage !== 0 && `transition: all 1s ease-in-out;`}

이 코드는, 애니메이션을 설정을 해 주는데, percentage 값이 0 일 때는 애니메이션 효과가 적용되지 않습니다. 따라서, 게이지바가 차오르다가, 나중에 이 값이 0으로 리셋 될때는 1초가 걸리는게 아니라, 애니메이션 효과 없이 0으로 설정됩니다.

그 다음엔 방금 만든 컴포넌트를 WritePost 에서 불러와서 StyledTextarea 하단에 렌더링하세요.

src/components/WritePost/WritePost.js

import Progress from './Progress';

(...)

const WritePost = ({onChange, value}) => (
    <Wrapper>
        <StyledTextarea
            minRows={3} 
            maxRows={10} 
            placeholder={`의식의 흐름대로 당신의 생각을 적어보세요.\n5초이상 아무것도 입력하지 않으면 자동으로 포스팅됩니다.`}
            value={value}
            onChange={onChange}
        />
        <Progress/>
    </Wrapper>
);

export default WritePost;

이렇게 코드를 작성하고 나면 게이지바가 보여질 것 입니다.

새로고침을 해보세요, 게이지가 처음부터 다시 차나요?