react styled components 실습

Dl2l·2023년 2월 20일

내사랑 css가 새 옷을 입었다...
너의 새로운 모습도 알아가볼게..

먼저.. 태초에 버튼이 있었다.

이친구를 정석대로 만든 코드는 아래와 같다.

styled components 적용 전

App.js

import "./styles.css";

export default function App() {
  return <button id="practice">버튼임</button>;
}

css


#practice {
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
}

#practice:hover {
  background: cornflowerblue;
  color: white;
  transition: 0.5s;
}

hover하면 글자색과 배경색이 0.5초 트렌지션을 가지며 바뀌는 하늘색 버튼이다.

styled components 적용 후

준비!

🥸 1. Styled Components 라이브러리 설치

터미널에 $ npm install --save styled-components을 입력해 Styled Components 라이브러리를 설치해준다.

🥸 2. package.json에 아래 코드 추가

Styled Components 여러 버전 설치될 때 생기는 문제를 줄여준다고 한다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

🥸 3. Styled Components import하기

Styled Components를 사용할 파일로 import해준다.

import styled from "styled-components";

App.js

//Styled Components를 사용할 app.js에 요것을 임포트해준다.
import styled from "styled-components";


const Button1 = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

export default function App() {
  return <Button1>버튼임</Button1>;
}

삐걱대며 알게 된 사실

🥹 Hover 사용이 편리하다

Hover를 위해 css 선택자를 새로 작성하면서 볼륨을 늘릴 필요가 없다.
&:hover만 추가하면 된다!

const Button1 = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

🥹 태그는 파스칼케이스로 작성하기

파스칼 케이스로 태그를 작성하면 버튼으로 인식하고 카멜케이스로 태그를 작성하면 인식하지 못했다.

- 파스칼 케이스로 버튼 태그 작성

const ButtonPascalTest = styled.button` //css 생략 `;

export default function App() {
  return <ButtonPascalTest>버튼임</ButtonPascalTest>;
  //버튼 css가 적용된다. 버튼태그에 button텍스트를 넣는건 필수가 아니다
}

-카멜 케이스로 버튼 태그 작성

const buttonCamelTest = styled.button` //css 생략 `;

export default function App() {
  return <buttonCamelTest>버튼임</buttonCamelTest>;
  //버튼 css가 적용되지 않는다..
}

파스칼케이스와 카멜케이스

var PascalCase;

첫 글자와 중간 글자들이 대문자인 경우 파스칼 언어의 표기법과 유사하다고 하여 파스칼 케이스라고 한다.

카멜 케이스 (camel case)
var camelCase;

중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우에는 낙타와 모양이 비슷하다 하여 카멜 케이스라고 한다.