(14)React_초급_React_Design_3_React에 CSS 적용하는 여러가지 방법

● 이미지 파일 불러오기 : import VarImg from '이미자파일 경로' + <img src = {VarImg}>

- Ex  : 

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

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

export default App;

● 인라인 스타일 : const style 객체 <= css 스타일 시트 + 태그 || 컴포넌트 태그의 style 속성값 <= style객체

○ const style에 시트 넣을 때, 

• 속성명 : 카멜Case
• 대입 연산자 : ':' ('=' 아님)
• 연결 연산자 : ', ' (';' 아님)

- Ex  : 

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

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

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

export default App;

 

● 외부 CSS 불러오기 : 해당 컴포넌트 js 파일 위에 import 'CSS 경로' 

● 외부 CSS 의 class 적용하기 : 

• import 'CSS 파일 경로';
• 태그의 class 적용일 경우 => className 속성값 <= const classNames= '부모 클래스 {}' => 태그 className 속성  = {classNames}
• 컴포넌트 태그의 class 적용일 경우 => className = "부모 {해당 태그의 속성추가}" => 컴포넌트 태그의 className 매개인자와 className 의 props.객체 추가하기

- Ex  : 

import diceImg from './assets/dice.png';
import './Dice.css'//외부 CSS 파일인, Dice.css 불러오기

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

function Dice() {


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

export default App;

● 외부 classnames 라이브러리 사용하기 : //다른개발자들이 만들어 놓은 코드 이용

import classNames from 'classnames';

function Button({ isPending, color, size, invert, children }) {
  return (
    <button
      className={classNames(
        'Button',
        isPending && 'pending',
        color,
        size,
        invert && 'invert',
      )}>
     { children }
   </button >
  );
}

export default Button;

○ 절차

순서1 _ 터미널에서 npm install classnames를 입력한다.

순서2 _ import classNames from 'classnames'; 입력

순서1 _ 태그의 className 속성값에 {classNames()}메소드로 메소드 내 적용하고 싶은 스타일 시트 속성을 매개인자로 추가하여 사용한다.

    <button
      className={classNames(
        'Button',
        isPending && 'pending',
        color,
        size,
        invert && 'invert',
      )}>
     { children }
   </button >