리액트 주사위게임&가위바위보게임 만들기 - 4.CSS 클래스네임

✅ 컴포넌트 디자인하기

🔎 디자인 적용하는 방법
① 이미지 불러오기
: 이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용

② 인라인 스타일 (변하는 값에 주로 사용)
- 문자열이 아닌 객체형으로 사용!
- 프로퍼티 이름은 카멜케이스로 사용해야 함

③ CSS파일 불러오기 (고정된 값에 주로 사용)
: import 구문으로 파일을 불러오며, from 키워드 없이 사용

④ 클래스네임
: CSS파일에 정의된 클래스명을 className prop에 문자열로 넣어주면 됨
⭐ 재사용성을 위해 className prop을 부모 컴포넌트에서 받으면 더 좋음!

⑤ classnames 라이브러리 사용
: 클래스네임이 여러개일 경우 코드가 지저분해지기 때문에 적절하게 사용하면 좋음
ㄴ✅ 설치방법
    터미널에 npm install classnames  설치 후 import하기

※ NPM classnames 패키지 : https://www.npmjs.com/package/classnames

 

 

1️⃣ css 파일 import하기

① index.css 파일 생성

body{
    background-color: #191f2c;
    color: #fff;
}

 

② index.js에 import하기

: import문 다음에 바로 파일 경로를 붙여 준다.

 

③ 개발자도구 확인!

: head 태그 안에 style 태그가 자동으로 작성되는 원리

 

 

 

2️⃣ 인라인 스타일 디자인을 CSS파일로 변경해보기

🟡변경전

const baseButtonStyle = {
  padding: "14px 27px",
  border: "solid 1px #7090ff",
  outline: "none",
  color: "#7090ff",
  cursor: "pointer",
  backgroundColor: "rgba(0,89,255,0.2)",
  borderRadius: "30px",
  fontSize: "17px",
};

const blueButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: 'rgba(0,89,255,0.2)',
    border:'solid 1px #7090ff',
    color:'#7090ff',
};

const redButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: 'rgba(255,78,78,0.2)',
    border:'solid 1px #ff466f',
    color:'#ff4664'
};

function Button({ children, onClick, color }) {
    const style = color === 'red'? redButtonStyle : blueButtonStyle;
  return (
    <button style={style} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

 

🔴변경 후

- Button.css

.Button{
    padding: 14px 27px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    font-size: 17px;
}

.Button.blue{
    background-color: rgba(0, 89, 255, 0.2);
    border: solid 1px #7090ff;
    color: #7090ff;
}

.Button.red{
    background-color: rgba(255, 78, 78, 0.2);
    border: solid 1px #ff4664;
    color: #ff4664;
}

 

- Button.js

import './Button.css';

function Button({ children, onClick, color='blue' }) {
    const classNames = `Button ${color}`;
    //const style = color === 'red'? redButtonStyle : blueButtonStyle;
  return (
    <button className={classNames} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

⭐ 템플릿 문자열로 바꿔주고, 클래스명을 추가할 때는 중간에 빈 공백이 꼭 필요함!!

⭐ color prop을 실수로 전달하지 않았을 때 undefined라는 문자열이 들어갈 수도 있기 때문에 기본값 'blue' 지정

 

 

🔎 className 사용시 꿀팁!
- margin과 같이 요소의 외부적으로 영향을 끼칠 만한 스타일 속성은 부모 컴포넌트 관점에서 다루는것이 좋음