리액트 style 정의

css style 정의와 달라지는 점 3가지를 유의해야 될 것 같다.

아래 리액트 style과 비교하면서 살펴보자.

.container { <--- = 표시가 없다.

  width: 166px ; <--- ' 따옴표' 인용이 없다.

  height: 166px; <--- 세미콜론(;) 으로 한다.

  backgroundImage: url( ' https://.....png ' );

}

const style = { <---- = 로서 객체를 정의

  width: '166px', <--- 프로퍼티값이 문자열일 경우 '따옴표'로 감싼다.

  height: '166px', <---- 객체의 프로퍼티들은 쉼포(,) 로 구분한다.

  backgroundImage: `url('${backgroundImg}')`,
}

리액트는 객체로서 style 객체를 만들기 때문에 3가지가 달라질 수 밖에 없습니다.

마지막으로 이미지 주소를 나태낼때 import 로 이미지 파일을 불러온 값을 사용

//css에서 이미지 주소를 나타낼 때
backgroundImage: url( ' https://.....png ' ); <---- 처럼 `url(' 따옴표')` 식이다.

//리액트에서 이미지 주소 나타낼 때
import backgroundImg from './assets/purple.svg';

backgroundImage: `url('${backgroundImg}') ` //객체는 프로퍼티값에 따옴표를 추가로 해야 되니, 밖에는 백틱따옴표로 표시한다.