해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
css 를 작성해보자.
create-react-app 으로 리액트 설치시, 별도의 다른 패키지 설치 없이 CSS 를 작성을 바로할 수 있는 방법 3가지가 있다.
1. 인라인 스타일을 사용한다.
css 파일을 따로 작성할 필요 없이 HTML 태그에 바로 적는다.
css 를 작성하려면 중괄호 안에 중괄호로 객체 작성을 해야만 한다.
이때 주의할 점은 하이픈(-) 을 사용하는 것이 아니라 카멜케이스로 key 를 작성하는 것이다.
문자열은 따옴표로 감싸야하고, 숫자는 따옴표로 감싸거나 그냥 기입해도 된다.
마크업 언어가 다 그런편이지만, 특별한 이유가 아니면 이렇게 인라인으로 작성하지 않는다.
2. 리액트 프로젝트 생성시 자동으로 생성된 index.css 파일을 사용한다.
App.css 와 index.css 파일 2가지가 존재한다.
index.css 는 전체 프로젝트에 영향을 미치는 설정이 담겨 있고, App.css 는 App 컴포넌트에 한정된 내용들이 담겨 있다.
css 파일에 들어가서 클래스도 추가하면서 사용할 수 있다.
(문제점) 사실 App.css 는 App 컴포넌트에만 적용되는 것이 아니다.
3. (컴포넌트명.module.css) 를 통해 컴포넌트 단위로 css 를 관리한다.
App.js 에 box 라는 클래스를 추가하고, App.css 에 box 에 대한 스타일을 설정한다.
Hello.js 에 box 클래스를 추가하고, Hello.css 로 box 에 대한 스타일을 설정한다.
(결과창)
오버라이딩된 것을 확인할 수 있다.
css 파일이 각 컴포넌트에 종속되는 것이 아니라, <head> 안에 <style> 이 다같이 작성되어서 전체 페이지에 모두 영향을 미칠 수 있게된다.
(각 컴포넌트에만 영향을 미치는 css 파일을 작성해보자.) css 모듈을 활용한다. → ( Hello.module.css ) 이렇게 파일명을 작성한다.
styles 객체를 생성한 후, 문자열이 아닌 {styles.box} 이런식으로 작성한다.
App.module.css
서로 중복되지 않는다.
또한, 글로벌이 아니라 컴포넌트 단위로 관리되는 것이 장점이다.
