index.css 와"create-react-app"에 의해 작성된 기본 앱의 App.css는 어떤 차이가 있습니까?

index.css 와"create-react-app"에 의해 작성된 기본 앱의 App.css는 어떤 차이가 있습니까?

index.css는 글로벌 스타일에, App.css는 App 컴포넌트에만 있는 것 같습니다만, App 컴포넌트도 보통 제 앱이 아닌가요?여기서의 베스트 프랙티스는 무엇입니까?

App 컴포넌트는 기본적으로 React 기반 어플리케이션의 최상위 컴포넌트이며, 그 외의 컴포넌트는 모두 하위 컴포넌트입니다.따라서 create-react-app에서 App.css와 index.css가 존재하는 이유는 create-react-app이 매우 단순한 디렉토리 구조를 가질 수 있기 때문에 "App.css"와 "index.css" 간에 이름 경합이 발생하지 않기 때문에 일반적인 것을 삭제하는 데 걸리는 시간이 단축되고 대신 더 오래 걸립니다.React 기반 앱을 구축하기 위한 베스트 프랙티스는 각 컴포넌트가 자체 index.js 파일, index.css 파일 및 index.test.js와 같은 파일이나 테스트 파일을 구조화하는 방법을 사용하여 각각의 개별 디렉토리에 있는 것 뿐입니다."Index.js"는 ES6 Import 문을 호출할 때 디렉토리에서 가장 먼저 검색되는 파일입니다.이것에 의해, 다음의 내용을 쓸 수 있습니다.

import HUD from './HUD'

다음 대신:

import HUD from './HUD/HUD.js'

따라서 index.css를 사용하면 이 index.css 파일이 이 컴포넌트용임을 알 수 있습니다.이 index.js는 이 컴포넌트만을 참조합니다.

React 응용 프로그램의 기본 디렉터리 구조는 다음과 같습니다.

src
├── App
│   ├── HUD
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── index.css
│   ├── index.js
│   ├── index.test.js
│   ├── Maze
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── Tile
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   └── TouchControl
│       ├── index.css
│       ├── index.js
│       └── index.test.js
├── index.css
└── index.js

src level index.css 파일은 최상위 컨테이너 DOM 요소 CSS 스타일 규칙을 넣는 데 적합합니다.src level index.js는 React 기반 응용 프로그램의 첫 번째 위치이기 때문입니다.React는 App 컴포넌트를 컨테이너 요소의 실제 HTML DOM에 물리적으로 마운트하도록 React에게 지시하고 다음과 같은 'root'은 ID입니다.JavaScript가 로드되기 전에 이미 페이지에 ent:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render( <App />, document.getElementById('root'))

언급URL : https://stackoverflow.com/questions/44484907/index-css-vs-app-css-in-default-app-created-by-create-react-app-whats-the