이제 전 강의에서 언급했듯이
vanilla ccs를 사용하는 것에 대한 한 가지의 단점은
css 규칙과 여러분의 css 코드가 일반적으로
여러분이 속했으면 하는
컴포넌트로 스코핑되지 않을 수 있다는 것입니다
여기서 간단히 여러분에게 예시를 보여주겠습니다
여기 Header.css 파일에서는
우리는 여기 헤더를 스타일링하는 것에
영향을 미치는 몇 가지의 규칙을 가지고 있습니다
예를 들자면
여기 있는 규칙 또한, 헤더에서 보여지는 paragraph를 스타일링 합니다
이제 우리가 이 Header.jsx 파일에
이 Header.css 파일을 import 하는 것이기에
여러분은 여기서 정의된 규칙이
오직 이 header 컴포넌트에서 정의된 jsx 코드에만 적용된다고 생각할 수 있습니다
왜냐하면 이것이 우리가 css 파일을
import 하는 곳이기 때문입니다
하지만 그렇지 않습니다
여러분에게 보여드릴 수 있듯이
이 header 파트를 paragraph 규칙 앞에서 지우는 것을 통해
저는 그것이 header인지 아닌지에 상관없이
어떤 paragraph 이든 목표로 하는 것입니다
그리고 임시적으로
저의 Authinputs.jsx 파일로 간다면
여기 buttons 위에
저는 임시로 몇 가지의 텍스트를
paragraph로 추가합니다
그렇게 하고 저장한다면
저는 그 paragraph를 여기서 확인하고
이 paragraph와 완벽히 동일한 스타일링을 받게 됩니다
당연히 이것은
일단 색깔을 제가 하고 싶은대로
회색에서
빨간색 같은 색으로 Header.css 파일에서 변경하는 것으로 증명할 수 있습니다
그렇게 하면 여러분은 이제
당연히 이 paragraph 와
두 paragraph 모두 빨간 색인 것을 볼 수 있습니다
따라서 이 아래 paragraph는 이 규칙에 의해 목표가 되고
이것은 이 paragraph가 다른 파일에 있는
다른 컴포넌트에 정의되더라도 말입니다
따라서 비록 여러분이 css 코드를
여러 개의 파일로 나누더라도
이 파일 중 몇 개를 특정 컴포넌트 파일로
import 하더라도
그 파일에 css 규칙들은
그들이 속하는 컴포넌트에
스코핑되지 않는다는 것을 이해하는 것이 중요합니다
왜냐하면 그들이 이 컴포넌트에 속하지 않기 때문입니다
대신 여러분이 개발자 툴을 다시 열면
이 모든 스타일은 결국
vite를 통해
header 섹션으로 주입된다는 것을 잊지 맙시다
헤더 스타일과 다른 스타일 말입니다
따라서 당연히
이것들은 이 페이지에 전체적으로 적용됩니다
이것은 그다지 문제가 되지 않지만
기억하고 있어야 할 것입니다
이 vanilla css 접근을 활용할 때
여러분의 스타일은 스코프 되지 않습니다
따라서 저는 여기서 변경사항을 거꾸로 하겠습니다
그리고 제가 원했던 색으로 다시 설정하겠습니다
그리고 제가 필요하지 않은
AuthInputs 에 있는 이 paragraph를 삭제하겠습니다
그러나 여러분은
이 규칙들이
이 index.css 파일에 있는 모든 규칙들이
어떤 컴포넌트에도 스코핑되지 않는 것을 기억해야 합니다