리액트를 다루는 기술 + typescript 9장 1

컴포넌트 스타일링

사용하게 될 스타일링 방식

• 일반 CSS

• Sass

• CSS Module

• styled-components

---

프로젝트 준비하기

• yarn create react-app styling-react --template typescript

• cd styling-react

• yarn start

---

일반 CSS

• 기본 프로젝트 생성 시, App.css를 열어보면 일반 css 를 볼 수 있습니다.

App.css

.App{
    text-align : center;
}

.App-logo {
    animation : App-logo-spin infinite 20s linear;
    height : 40vmin;
}

.App-header {
    background-color : #282c34;
    min-height : 100vh;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    font-size : calc(10px + 2vmin);
    color : white;
}

.App-link {
    color : #61dafb;
}

@keyframs App-logo-spin {
    from {
        transform : rotate(0deg);
    }
    to {
        transform : rotate(360deg);
    }
}

이름 짓는 규칙

• 클래스 이름이 컴포넌트이름 - 클래스 로 지어져 있습니다.

• 클래스 이름에 컴포넌트 이름을 포함하여 다른 컴포넌트에서 실수로 중복되는
  클래스를 만들어 사용하는 것을 방지 할 수 있습니다.

---

CSS Selector

• CSS Selector를 사용하면, CSS클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용 할 수 있습니다.

• 프로젝트 생성 시, 기본으로 주어진 App.css 파일을 변형시켜 보겠습니다.

App.css

.App{
    text-align : center;
}

/* .App 안에 들어 있는 .logo */
.App .logo{
    animation : App-logo-spin infinite 20s linear;
    height : 40vmin;
}

/* className="App" 내부의 header 태그
 태그는 className이 아니므로, "."이 붙지 않습니다. */
.App header {
    (...)
}

.App a{
    color : #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform : rotate(0deg);
    }
    to {
        transform : rotate(360deg);
    }
}

• 이처럼 CSS Selector를 사용하게 된다면, 기본 App.tsx 내부의
  <header>, <a> 태그의 className속성을 없애도 작동합니다.

---