React 프로젝트 초기세팅하기

1. React 프로젝트 생성하기

npx create-react-app 폴더명 --template basic-react
(해당 명령어를 통해 불필요한 파일 없이 리액트 프로젝트 기본세팅이 가능하다)

2. styled-components 설치하기

npm install styled-components
사용하고자 하는 파일에 import 해주면 된다
import styled from "styled-components";

3. global style 만들기

모든 컴포넌트에서 공통으로 적용되는 스타일을 만들기 위해서 styled-components가 제공하는 createGlobalStyle() 함수를 이용하면 된다.

App.js(최상위 컴포넌트) 상단에 아래와 같이 추가하면 적용된다.

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
	/* 공통으로 적용할 css 작성해주면된다 */
`;

4. reset.css 적용하기

npm i styled-reset

App.js 상단에 아래 코드 추가하기

import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* 공통으로 적용할 css 작성해주면된다 */
`;