[React]App.css VS index.css

결론부터..  현재 코드를 작성하는 폴더의 이름과 같은 css 파일이 가장 바람직함.

---

개인적인 의견으로는 연습용 코드작성이라면  index.js보다는 App.js로 하는게 낫다.

App.js는 프로젝트 진행시 서버 설정 / 미들웨어 정의 / 라우트 정의/인증 등 여러가지를 설정하고,

(App의 상위 파일인) index.js는 index.html과 연결하여 화면에 렌더링을 하는 역할을 하기 때문에

대부분의 작업은 

컴포넌트 -> App.js로 연결 -> index.js가 App.js를 import -> index.html와 연결되어 화면에 렌더링

하기때문에 실제로 index.js에 직접 화면 구현을 위한 코드를 짤 일이 많지 않기 때문..

 

App.js 그리고 index.js

관련 블로그글 : https://pink1016.tistory.com/82

[자바스크립트] index.html, App.js, index.js 이해하기

---

아무튼.. 본론으로 돌아가서

맨 처음 react 프로젝트 폴더를 생성하면 나오는 디렉토리에는 css파일이 두 개가 있다.

 

여기요

 

 index.css 와 App.css가 모두 존재하는 이유는 단순이 이름의 충돌을 막기 위해서 그렇다.

 

가장 추천되는 방식은 어떤 javaScript파일에 코드를 작성하는지에 따라

해당 이름과 같은 css파일을 만들어서 작성하면 된다.

 

출처 : 아래 링크

---

번외로 App.js에 작성한 코드에 다른 색상의 css를 각각

App.css && App.css &&  index.css 에 줬더니 App.js에 있는 속성이 적용됐다.

---

아래는 App.js말고 App.css && index.css 에만 같은 요소에 css 를 적용했을 때

 

---

출처 : 

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

index.css vs. App.css in default app created by "create-react-app" -- what's the difference?