react 에서 calc 기능 사용하기

const App = () => {
  const navbarHeight = '200px';
  const footerHeight = '100px';

  return (
    <div
      style={{
        minHeight: `calc(100vh - ${navbarHeight} - ${footerHeight})`,
      }}
    >
      <h2>Hello world</h2>

      <div style={{width: 'calc(100% - 600px)'}}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
};

export default App;

• 템플릿 리터럴을 사용하면 된다.

` ` (백틱)로 묶어주고 상수의 경우 그냥 표시. 변수의 경우 ${} (자리표시자) 사용