5.3 리스트 렌더링 및 조건부 Content: 동적 스타일 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

css를 동적으로 스타일링 하기

동적인 변화를 주어야하기 때문에 let으로 변수를 선언한다.  ( barFillHeight )

그리고 조건문을 활용해 props에 동적인 변화를 주고 css 스타일을 추가하고싶은 className이 있는 태그에서

style을 추가하면 된다. 

import React from "react";

import "./ChartBar.css";

const ChartBar = (props) => {
  let barFillHeight = "0%";

  if (props.maxValue > 0) {
    // 모든 Month의 value 각각 maxValue 값으로 나누고 100을 곱한 후 반올림
    barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%";
  }

  return (
    <div className="chart-bar">
      <div className="chart-bar__inner">
        <div
          className="chart-bar__fill"
          style={{ height: barFillHeight }} // css style 추가
        ></div>
      </div>
      <div className="chart-bar__label">{props.label}</div>
    </div>
  );
};

export default ChartBar;

# ChartBar.js

css 부분

chart-bar__fill 에 height 값이 추가되며 동적으로 변할 것 이다.

 

.chart-bar__fill {
  background-color: #4826b9;
  width: 100%;
  transition: all 0.3s ease-out;
}