[React] CSS 사용하기

인라인 스타일

리액트에서 인라인 스타일은 객체형으로 쓰입니다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티의 CSS값은 CSS 속성 값으로 쓰입니다.

한가지 주의할 점은 -(대시)기호가 들어간 속성이름은 CamelCase로 작성해야합니다.

ex) boarder-radius -> boarderRadius

import diceImg from './assets/dice.png';

const style = {
  borderRadius: '50%',
  width: '120px',
  height: '120px',
};

function Dice() {
  return <img style={style} src={diceImg} alt="주사위 이미지" />;
}

export default App;

 

import해서 가져오기

import구문과 똑같이 쓰는대 from을 안쓰면 됩니다. 즉 전체파일을 불러오는 거죠.

import 'css파일경로'

 

클래스 네임 활용하기

CSS 파일에서 정의된 클레스 이름을 className prop에 넣어주면 됩니다. 이때 재사용성을 위해 부모로부터 받아오는 것이 좋습니다.

import diceImg from './assets/dice.png';
import './Dice.css';

function Dice({ className = '' }) {
  const classNames = `Dice ${className}`;
  return <img className={classNames} src={diceImg} alt="주사위 이미지" />;
}

export default App;