[React] 기초, 셋팅 초기 파일명과 파일 역할

 

파일별 역할 설명

 

파일이름	역할
App.jsx	리액트 앱의 메인 컴포넌트. 보통 이 파일에서 전체 레이아웃을 구성하며, 다른 컴포넌트들을 불러와 사용합니다.
App.css	App.jsx에서 사용하는 스타일이 들어가는 파일입니다. App 컴포넌트 전용 CSS로 생각하면 됩니다.
index.css	프로젝트의 전역 스타일을 정의합니다. 예: body, html, 기본 글꼴, margin/padding 초기화 등 전체에 적용되는 CSS
main.jsx	리액트 앱의 진입점(Entry point) 입니다. App.jsx를 root DOM에 렌더링하는 역할을 하며, 가장 처음 실행되는 파일입니다.

html 마크업과 비교

 

• index.css에는 reset.css, 기본 글꼴, 공통 요소 마진 제거 등을 하면 좋아요.
• App.css는 컴포넌트 단위 스타일이라 구체적으로 관리 가능해요.
• 스타일을 더 세분화하려면 Component별 CSS로 나눌 수도 있어요 (예: Header.jsx, Header.css).