[React] 디자인 적용

React에서 이미지를 넣거나 디자인을 적용하고자 할 때 사용하는 방법

이미지 불러오기

react에서 이미지 파일을 불러오는 방법은 import 구문을 이용하는 것이다. 아래와 같이 import를 통해 이미지 파일을 불러오고 src 속성으로 사용한다.
image 이미지 이름 from 경로;

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

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

export default App;

인라인 스타일

react에서 인라인 스타일은 문자열이 아닌 객체 형태로 사용한다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 쓴다. 이때 프로퍼티 이름은 대시 기호 없이 카멜 케이스로 작성해야 함을 유의한다. (아래 예시 - borderRadius)

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;

CSS 파일 불러오기

import 구문을 통해 css 파일을 불러오며, 이때 from 키워드 사용은 하지 않는다.
import './Dice.css';