[React] Directory scan

new 프로젝트 생성

---

 

구조를 확인하기 위해 코드샌드박스로 리액트 프로젝트를 하나 생성 합니다.

 

https://lshjju.tistory.com/143

 

 

 

src/index.js

프로젝트 입구입니다.

앱제이에스를 출력하는 용도입니다.

<App /> 태그를 지워 보세요.

뷰에 아무것도 안보일겁니다.

위 태그는 아래 App.js를 뜻합니다.

 

 

코드의 주요 역할

진입점(Entry Point): 

이 코드는 React 애플리케이션이 시작되는 첫 지점입니다. 

index.js와 같은 파일에 위치하며, 웹 브라우저가 이 파일을 읽으면서 애플리케이션이 실행됩니다.

DOM 연결: 

HTML 파일(index.html)에 있는 <div id="root"></div>와 같은 특정 요소를 찾아, 그 안에 React 컴포넌트가 렌더링될 공간을 만듭니다.

컴포넌트 렌더링: 

App 컴포넌트를 이 공간에 렌더링함으로써, App.js에 정의된 내용이 화면에 나타나게 됩니다. 

App 컴포넌트가 다른 컴포넌트들을 포함하고 있으므로, 결국 전체 애플리케이션이 렌더링되는 것입니다.

 

 

 

 

 

src/App.js

 

UI 뷰를 담당 합니다.

디브 태그 안에 

Hello React!

라고 넣어 보세요.

뷰에 출력될 것입니다.

 

 

 

코드의 핵심 기능

스타일 적용: 

import "./styles.css"; 코드는 별도의 CSS 파일에 정의된 스타일을 가져와서 이 컴포넌트에 적용합니다. 

이렇게 하면 콘텐츠와 스타일을 분리하여 관리할 수 있습니다.

컴포넌트 정의: 

export default function App() { ... }는 React의 기본 단위인 컴포넌트를 만듭니다. 

이 컴포넌트는 단순히 UI의 일부분을 나타내는 재사용 가능한 코드 조각입니다.

JSX 반환: 

컴포넌트 내부의 return 문은 화면에 그려질 HTML과 유사한 마크업을 정의합니다. 

이것을 JSX라고 부르는데, React가 이를 해석해서 실제 웹 페이지의 DOM 요소로 변환합니다.

 

 

 

 

src/App.css

src/index.css

src/styles.css

src/style.css

 

.App { font-family: sans-serif; text-align: center; }

 

css 파일은 위처럼 약 4가지 경우의 수가 있을 수 있습니다.

프로젝트 환경이나 버전에 따라 조금씩 달라 질 수 있습니다.

보통은 App.css 를 많이 쓰는 편입니다.

디자인 담당입니다.

 

 

 

 

index.html

 

 

 

<div id="root"></div> 이 태그에 

<React.StrictMode> <App /> </React.StrictMode>

src/index.js 파일의 위 태그가 들어옵니다.

 

즉 리액트 앱의 모든 코드가 이 html안에 다 담긴다는 의도로 이해하면 됩니다.

 

이 코드는 React 애플리케이션을 위한 기본 HTML 파일입니다. 

React는 단일 페이지 애플리케이션(SPA)이기 때문에, 모든 컴포넌트가 이 하나의 HTML 파일에 렌더링됩니다.

추가예정

 

 

출처 ： egoing - React - Directory scan