[React] 디자인 적용 방법

인라인(in-line)

리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용. Property 이름은 CSS 속성 이름으로, property 값은 CSS 속성값으로 씀. 이 때, property name은 대시 기호 없이 카멜케이스로 써야 한다. 

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 구문을 통해서 불러오고 불러온 이미지 주소를 src 속성으로 사용.

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

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

export default App;

CSS파일 불러오기 

import구문을 활용해서 css파일을 불러올 수 있음. 

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

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

export default App;

클래스네임 사용하기 

CSS 파일에 정의된 클래스 명을 className prop에 문자열로 넣어줄 수 있다. 재사용을 위해 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;

클래스네임 편리하게 쓰는 방법

1. 템플릿 문자열을 사용한 예 

function Button({ isPending, color, size, invert, children }) {
  const classNames = `Button ${isPending ? 'pending' : ''} ${color} ${size} ${invert ? 'invert' : ''}`;
  return <button className={classNames}>{children}</button>;
}

export default Button;

2. 배열을 사용한 예

function Button({ isPending, color, size, invert, children }) {
  const classNames = [
    'Button',
    isPending ? 'pending' : '',
    color,
    size,
    invert ? 'invert' : '',
  ].join(' ');
  return <button className={classNames}>{children}</button>;
}

export default Button;

3. 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;

:npm 프로그램을 통해 설치가능. npm install classnames 입력하고 설치한 다음에 import로 불러와서 사용. 

※ npm classnames 패키지사용법 :  https://www.npmjs.com/package/classnames