전에 언급했듯이
리액트 앱을 스타일링 하는데는 많은 옵션이 존재합니다
그리고 하나의 옵션은 당연히 여러분의 프로젝트에
index.css 파일 같은 것을 추가하는 것입니다
여기서 여러분의 css 규칙을 요소 선택자
ID 선택자, 클래스 선택자를 활용하여 정의합니다
따라서 어떤 css 규칙이든 이곳에서 정의하고
이 css 파일을 import 합니다
그리고 이 강좌에서 이전에 배웠듯이
일반적인 리액트 프로젝트에서
예를 들면 여기 이 프로젝트에서는
기본 개발과 빌드 툴로 vite를 사용합니다
여러분은 이것과 같이 자바스크립트로 css 파일을 import할 수 있습니다
그리고 빌드툴, vite는
이러한 import를 식별하고 결과적으로
여기에서 서비스하는 이 웹사이트 안으로
여러분이 import하려는 css 파일이 주입되도록 합니다
따라서 여러분이 웹사이트의 개발자 툴을 열었을 때
여러분은 헤드 섹션에서
이 스타일이 vite를 통해 동적으로 주입된 것을 볼 수 있습니다
따라서 여기서 여러분은 index.css에 모든 정의된 스타일을 찾고
이것은 vite를 통해 여기 DOM에
동적으로 추가됩니다
따라서 이것이 어떻게 작동하는지에 대한 방법이고
여러분은 vanilla css 파일을 다음과 같이 그리고
여러분이 원하는 개수에 상관없이
포함시킬 수 있습니다
단일한 css 파일로 하지 않아도 됩니다
원하는 만큼 여러 개를 추가할 수 있고
따라서 예를 들어서 이 파일을
여러 개의 파일로 분리하고
각자의 파일을 그들이 속하는 컴포넌트로 첨부할 수 있습니다
예를 들어서 여기에서는
헤더에 특화된 스타일
즉 이 모든 규칙이 결국 여기에 있는 것처럼
별도의 헤더 css 파일로 이동하는 것이 좋을 것입니다
이 파일은 아마도 Header.jsx 파일 옆에 위치할 수 있습니다
따라서 우리는 여기에 Header.css 파일을 추가할 수 있고
헤더와 연관된 스타일을 찾아서
index.css로부터 잘라서 이 header.css에 추가합니다
그리고 이 Header.jsx에서
우리는 당연히 이와 같은 import를 추가합니다
이것은 Header.css 로부터 import 되는 것입니다
그리고 이 수정 사항들이 적용되면
저장하고 다시 로딩했을 때
여러분은 이 페이지가 아직 이전과 똑같이 보이는 것을 볼 수 있습니다
왜냐하면 당연히 여기 import는
vite.js로 해결되었고 스타일은
Header.css 파일에서 정의되었으며
이 웹페이지로 주입되었기 때문입니다
여러분이 아직 볼 수 있듯이 개발자 툴을 열면
헤드 섹션에
이젠 두 개의 추가된 스타일 태그가 있으며
하나는 헤더 스타일을 포함하는 것이고
다른 하나는
index.css 파일의 나머지 모든 스타일을 포함하는 것입니다