리액트에서 css적용하기

reset.css 적용하기

1. 필요한 것들 import하기

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

yarn add styled-reset 과
vsccode-styled-components 설치 필수

2. 글로벌 스타일 선언

const GlobalStyled = createGlobalStyled ${reset} body { background-color: red; }

3. 글로벌 스타일 적용

	 <>
      <GlobalStyle />
    ...생략
  	</>

---

조건에 따라 스타일 적용하기1

아래의 형태로 조건에 따라 스타일을 적용할 수 있다.

조건에 따라 스타일 적용하기 2

아래와 같이 현재의 인덱스가 activeIndex와 같으면 tre, 아니면 false를 e에 전달
onClick버튼이 클릭되면 setActiveIndex를 호출하여 클릭한 버튼의 인덱스를 상태로 설정

$active prop를 이용하여 버튼이 활성화 상태일 때와 아닐 때의 배경색을 다르게 설정

이렇게 스타일드 컴포넌트에 대해 알아보았다.
항상 css만 다루다가 Css in JS (자바스크립트 파일 내에 css스타일 정의)
를 사용해보니 어색하고 불편했다.

하지만 조건에 따라 스타일을 적용할 수 있는 부분은
좀 더 확장성 있게 css를 사용할 수 있을 듯 하여
불편하더라도 css대신 css in JS방식을 사용하여 익숙해지도록 해야겠다.