React 와 동적인 스타일

문제 상황

다음과 같은 문제가 있다.

컴포넌트의 요소 예를 들어 div에 스타일을 추가하고 싶다.
컴포넌트가 실행될 때마다 새로운 값을 받아서 그 값을 스타일 요소로 주고 싶다.

CSS 파일을 import해서 스타일을 적용할 수 있지만, 컴포넌트가 실행 될 때마다 새로운 값을 적요하진 못한다.
이 문제를 해결하기 위해서는 동적인 스타일이 필요하다.

해결 방안

위 코드는 컴포넌트가 실행될 때마다 props에서 값을 받아서 동적으로 스타일 값을 적용해주는 모습이다.
JSX 코드의 요소(div)에 prop(style)을 추가해주는 것으로 해결했다.

일반적인 HTML의 요소에 어트리뷰트를 작성할 때랑 조금 다르게 작성해야된다.
다른 prop들은 동적인 값을 받기위해 {} 처럼 단일 중괄호를 사용하지만 이 style prop은 {}안에 객체를 스타일 값으로 받는다. 조금 더 자세하게 보면

<div
  style = {
    { 'background-color': 'red',
      width: '10%',
      height: barFillHeight,
    }
  }
></div>

이런 방식이다.

style 객체의 Key 값에는 일반적인 CSS의 프로퍼티 이름을 사용하고,
Value에는 그대로 값을 사용해주면 된다.
이때 background-color 처럼 '-' 이 들어가는 프로퍼티는 작음따옴표로 감싸줘야 인식한다. 아니면 카멜케이스로 'backgroundColor'처럼 작성하면 인식된다.