[React + TS + Styled Components] 진행바 구현하기 (props로 진행수치 받기)

1️⃣ 개요

 환경은 React와 typescript, styled-components 를 사용했습니다. Styled-Components 는 Props 를 받아서 CSS 속성을 동적으로 변경해줄 수 있습니다. 

 

npm install -D styled-components

 

 Progress Bar가 위 그림에서 회색 전체 진행바 부분이고, 파란색 부분은 Progress 입니다.

 

파란색 Progress의 width를 조정하여 왼쪽부터 채우는 원리다.

 

위 사진에 border-radius를 씌우면 귀염귀염한 진행 바를 확인할 수 있다.

 

 

import {useEffect, useState, useRef} from "react";
import styled from "styled-components";

interface ITest{
    width: number,
} 

const ProgressBar = styled.div`
    width: 100%;
    height: 30px;
    background-color: #dedede;
    border-radius:12px;
    font-weight: 600;
    font-size: .8rem;
    margin-top: 20px;
    overflow: hidden;
`;

const Progress = styled.div`
    width: ${(props:ITest) => props.width}%; 
    height: 30px;
    padding: 0;
    text-align: center;
    background-color: skyblue;
    color: #111;
    `

function App(){
	const maxItem = 5
	let availableItem = 2

return(
    <ProgressBar>
        <Progress width = {100-(availableItem*100/maxItem)}/>
    </ProgressBar>
)]

 

참고

 

https://medium.com/@trustyoo86/react%EC%97%90-typescript-%EC%A0%81%EC%9A%A9%EC%8B%9C-styled-components-%EC%9D%B4%EC%8A%88-bd365de17e13

react에 typescript 적용시 styled-components 이슈