79. 동적 스타일 추가하기

style을 추가하고 싶을 때

dash 가 존재하는 경우에는 따옴표로 감싸서 작성하거나 아니면 카멜케이스로 따옴표 없이 작성하면 된다

<div style={{ backgroundColor: 'red' }}></div>

<div style={{ 'background-color': 'red' }}></div>

 

.ChartBar.js

import React from 'react';

const ChartBar = () => {

  let barFillHeight = '0%';

  if (props.max > 0) {
    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 }}></div>
    </div>
    <div className="chart-bar__label"></div>
  </div>
}

export default ChartBar;