이제 컴포넌트를
여러 파일에 걸쳐 나눴으므로
프로젝트 코드의 다른 부분도
여러 파일에 걸쳐 나눠야 합니다
스타일 관련 코드입니다
이 프로젝트에는
여러 CSS 스타일을 준비했습니다
CSS 수업이 아닌 리액트 수업이기 때문에
그러므로 이 CSS 코드를 처음부터 만든 것이 아닙니다
그럼에도 불구하고, 제가 여러분을 위해 준비한
이 CSS 코드는
헤더에 적용되는
모든 스타일과
핵심 개념 항목에 적용되는
스타일을 포함합니다
따라서 이 CSS 파일을 여러 개의
더 작은 컴포넌트별 CSS 파일로 분할할 수도 있습니다
예를 들어 Header.css 파일을
컴포넌트 폴더 안에, Header.jsx 파일 옆에 만들어서
이 관련된 두 코드를
가까이 위치하게 할 수 있습니다
그리고 다시 index.css로 가서
헤더 관련 CSS 규칙을 모두 고를 수 있습니다
모두 'header'로 시작하는 이 규칙을 전부
잘라서 index.css에서 제거 후
Header.css에 추가합니다
이제 저장하면
스타일링이 망가진 것이 보입니다
스타일이 없어진 것입니다
이는 리액트와 프로젝트 설정 상
Header.css 파일이 자동적으로
웹페이지에 로딩되지 않기 때문입니다
이 프로젝트와 코드에게
이 CSS 파일을 포함해야 한다고 알려줘야 합니다
index.css 파일에도 마찬가지 입니다
여기도 자동적으로 추가되는 것이 아닙니다
대신 index.jsx 파일에
이와 같은 import 문이 있는데
이 import문을 통해 index.css 파일이 포함됩니다
Header.css 파일에도 마찬가지입니다
포함이 되어야 한다면 import를 해야 하고
이는 일반적으로 스타일이 속해있는
컴포넌트 파일에서 할 수 있습니다
그러기 위해 import 문을 작성할 수 있는데
import './Header.css'를 작성하면 됩니다
이 근저에 있는 빌드 과정 덕분에
import문이 처리되고
로딩된 웹페이지에 CSS 코드가 적용됩니다
그러므로 이제 저장하면 스타일이 돌아옵니다
여기서 주의해야 할 중요한 점은
이러한 CSS 파일을 컴포넌트 파일로 가져와도
이러한 스타일이 컴포넌트에 적용되지 않는다는 것입니다
이는 단순히 페이지의 다른 곳에서
헤더 요소를 사용하는 경우
헤더 컴포넌트의 일부가 아니어도
해당 헤더 요소에도
스타일이 적용되는 것을 의미합니다
내장된 헤더 요소가 있는
App.jsx 파일에 직접
다른 헤더를 추가하면
여기에 h1 요소를 넣어
'Hello World'라고 작성하면
여기에 보이는 스타일과 같이 헤더가 스타일링 됩니다
코드를 추가하지 않아도
헤더 컴포넌트에 반영되는 것입니다
Header.css 파일에 있는 스타일이
헤더 컴포넌트에 범위가 제한된 것이 아니므로
이 페이지에 있는 모든 헤더 요소에
스타일이 적용되는 것입니다
이것을 주의해야 합니다
CSS 코드를
컴포넌트별 CSS 파일로 구분하면
어떤 스타일이 어떤 컴포넌트에 적용되는지
구분하는 것과
스타일을 조절하는 것이 훨씬 쉬워집니다
그러나 이 컴포넌트에
자동적으로 한정적으로 적용되는 것이 아니라는
제한점을 염두에 둬야 합니다
이 수업 과정에서 나중에
이런 잠재적인 문제에 대한 해결책을 배우며
스타일의 범위를 설정하는 것을 배울 것입니다
일단 이렇게 남겨두고
여기 앱 컴포넌트에 있는
부수적인 임시 헤더를 제거하고 저장합니다
물론 여기서
핵심 개념 스타일은 모두 추출할 수 있고
추출한 스타일을
CoreConcept.css 파일에 저장할 수 있습니다
이번 데모에서는 실행하지 않겠습니다
그 대신 헤더 컴포넌트의 components 폴더에
별도의 부 폴더를 생성해
이름을 'Header'라고 정합니다
그리고 Header.css와 Header.jsx 파일을
부폴더에 옮깁니다
이는 필수는 아니고
개인의 선택에 따라 결정되지만
특정 컴포넌트에 소속된 파일을
바로 찾을 수 있게 도와줘
프로젝트를 정리하기에 유용합니다
이와 같이 폴더 구조가 변경되었으니
App.jsx 파일에 들어가
import 문을 수정해야 하는데
이제 Header.jsx 파일이
components 폴더의 Header 부 폴더로 위치가 바뀌었기 때문입니다
더불어 Header.jsx 파일에
이미지 import 문을 수정해야 하는데
두 단계 위로 올라가야
assets 폴더가 있는
소스(src) 폴더까지 갈 수 있기 때문입니다
모든 조정이 끝난 후
저장을 하면
예전과 같이 작동이 되지만
이제 스타일이 별도의 파일에 저장되어 있고
대안적인 폴더 구조를 구성할 수 있게 되었습니다