[React-JavaScript] 게이지바 만들기

 

 

전체 값에서 현재 값의 비율을 나타내는 그래프를 만들고 싶었는데, 뭔가 모듈을 사용해야 하나 싶었지만 이런 간단한 형태는 div의 CSS값 조정으로 간단하게 할 수 있다는 걸 알았다.

 

전체 코드

import React, { useEffect, useState } from "react";
import styled from "styled-components";		// 리액트의 styled-components 모듈 사용

// 테두리 코드
const StyledBase = styled.div`
    height: 26px;		// 게이지 부분의 높이에 border 높이의 2배를 더해준다.
    border: 3px solid;
    margin-right: 15%;		// 페이지에서 원하는 부분만큼 자유롭게 설정
    margin-left: 15%;
    justify-content: center;
`

const StyledRange = styled.div`
    width: ${({ width }) => `${width}%`};	// 값을 받아서 %로 바꾸어 설정해준다.
    height: 20px;
    background: linear-gradient(to right, #FFACFC, #B76CFD);	// 그라데이션 설정
`
function Gauge() {
    const exp = 246;
    const ratio = parseInt(exp % 100);

    return (
            <StyledBase>	// Base 안에 Range를 넣어 준다.
                <StyledRange width={ratio} />	// props를 받아 width를 설정할 수 있게 함
            </StyledBase>
    )
};

export default Gauge;

 

내가 구현하고 싶은 그래프는 경험치 100 단위로 올라가는 레벨에서, 다음 레벨까지 남은 경험치를 보여주는 그래프였기 때문에, (ex. 246이면 전체 게이지에서 46%만큼 채워지고, 902면 2% 채워짐)

 

exp 값을 설정하고 ratio값은 100으로 나눈 나머지로 간단하게 설정하였다.

비율 계산만 잘하면 div 테두리와 채우기로 간단하게 구현 가능하다!

 

 

[참고자료] https://theubermensch.tistory.com/219

[React] 게이지 바 만들기