리액트 디렉토리 구조
new 프로젝트 생성
구조를 확인하기 위해 코드샌드박스로 리액트 프로젝트를 하나 생성 합니다.
https://lshjju.tistory.com/143
code sandbox manual - 코드샌드박스로 리액트 프로젝트 생성하기
code sandbox manual https://jjinny0609.tistory.com/172 https://developer-talk.tistory.com/97 https://meta-board.tistory.com/5 https://nomadcoders.co/faq/challenge/code-sandbox end.
lshjju.tistory.com
src/index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
프로젝트 입구입니다.
앱제이에스를 출력하는 용도입니다.
<App /> 태그를 지워 보세요.
뷰에 아무것도 안보일겁니다.
위 태그는 아래 App.js를 뜻합니다.
코드의 주요 역할
진입점(Entry Point):
이 코드는 React 애플리케이션이 시작되는 첫 지점입니다.
index.js와 같은 파일에 위치하며, 웹 브라우저가 이 파일을 읽으면서 애플리케이션이 실행됩니다.
DOM 연결:
HTML 파일(index.html)에 있는 <div id="root"></div>와 같은 특정 요소를 찾아, 그 안에 React 컴포넌트가 렌더링될 공간을 만듭니다.
컴포넌트 렌더링:
App 컴포넌트를 이 공간에 렌더링함으로써, App.js에 정의된 내용이 화면에 나타나게 됩니다.
App 컴포넌트가 다른 컴포넌트들을 포함하고 있으므로, 결국 전체 애플리케이션이 렌더링되는 것입니다.
// React의 StrictMode 컴포넌트를 가져옵니다.
// 개발 모드에서 잠재적인 문제를 찾아내기 위한 도구입니다.
import { StrictMode } from "react";
// React 애플리케이션의 루트(root)를 생성하는 데 사용되는 함수를 가져옵니다.
// 이 함수는 React 18부터 사용됩니다.
import { createRoot } from "react-dom/client";
// 현재 디렉토리에 있는 'App.js' 파일에서 'App' 컴포넌트를 가져옵니다.
// 이 'App' 컴포넌트가 React 애플리케이션의 최상위 컴포넌트가 됩니다.
import App from "./App";
// HTML 문서에서 ID가 "root"인 요소를 찾습니다.
// 이 요소가 React 컴포넌트가 렌더링될 실제 DOM 컨테이너가 됩니다.
const rootElement = document.getElementById("root");
// 위에서 찾은 'rootElement'를 사용하여 React의 루트를 생성합니다.
// 이 'root'는 React 애플리케이션의 렌더링을 관리하는 객체입니다.
const root = createRoot(rootElement);
// React 애플리케이션을 렌더링합니다.
root.render(
// 'StrictMode'로 'App' 컴포넌트를 감싸서,
// 개발 중 잠재적 문제(예: 사용되지 않는 라이프사이클 메서드)를 감지하도록 돕습니다.
<StrictMode>
{/* 애플리케이션의 최상위 컴포넌트인 'App'을 렌더링합니다. */}
<App />
</StrictMode>
);src/App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
UI 뷰를 담당 합니다.
디브 태그 안에
Hello React!
라고 넣어 보세요.
뷰에 출력될 것입니다.
코드의 핵심 기능
스타일 적용:
import "./styles.css"; 코드는 별도의 CSS 파일에 정의된 스타일을 가져와서 이 컴포넌트에 적용합니다.
이렇게 하면 콘텐츠와 스타일을 분리하여 관리할 수 있습니다.
컴포넌트 정의:
export default function App() { ... }는 React의 기본 단위인 컴포넌트를 만듭니다.
이 컴포넌트는 단순히 UI의 일부분을 나타내는 재사용 가능한 코드 조각입니다.
JSX 반환:
컴포넌트 내부의 return 문은 화면에 그려질 HTML과 유사한 마크업을 정의합니다.
이것을 JSX라고 부르는데, React가 이를 해석해서 실제 웹 페이지의 DOM 요소로 변환합니다.
// 'styles.css' 파일을 현재 컴포넌트로 가져옵니다.
// 이 코드는 'App' 컴포넌트와 그 자식 요소에 스타일을 적용합니다.
import "./styles.css";
// 'App'이라는 이름의 함수형 컴포넌트를 정의하고, 이를 기본 내보내기(default export)로 설정합니다.
// 이렇게 하면 다른 파일에서 'App' 컴포넌트를 쉽게 가져와 사용할 수 있습니다.
export default function App() {
// 컴포넌트가 렌더링할 JSX(JavaScript XML)를 반환합니다.
return (
// 'className' 속성은 HTML의 'class'와 동일한 역할을 하며, CSS 스타일을 적용하는 데 사용됩니다.
// 여기서는 'App' 클래스가 적용된 <div>를 생성합니다.
<div className="App">
{/* '<h1>' 태그와 '<h2>' 태그를 사용하여 두 개의 제목을 화면에 표시합니다. */}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
<div id="root"></div>
이 태그에
<React.StrictMode>
<App />
</React.StrictMode>
src/index.js 파일의 위 태그가 들어옵니다.
즉 리액트 앱의 모든 코드가 이 html안에 다 담긴다는 의도로 이해하면 됩니다.
이 코드는 React 애플리케이션을 위한 기본 HTML 파일입니다.
React는 단일 페이지 애플리케이션(SPA)이기 때문에, 모든 컴포넌트가 이 하나의 HTML 파일에 렌더링됩니다.
자세한 내용은 아래 주석을 참고 하세요.
<!DOCTYPE html>
<html lang="en">
<!--
<html> 태그는 모든 HTML 문서의 루트 요소입니다.
lang="en" 속성은 문서의 기본 언어가 영어임을 명시합니다.
이는 검색 엔진 최적화(SEO) 및 접근성 측면에서 중요합니다.
-->
<head>
<!--
<head> 섹션은 웹 페이지의 메타데이터를 포함합니다.
이 정보는 사용자에게 직접 표시되지 않지만, 브라우저와 검색 엔진이 페이지를 처리하는 데 사용됩니다.
-->
<meta charset="utf-8" />
<!--
<meta charset="utf-8"> 태그는 문서의 문자 인코딩을 UTF-8로 설정합니다.
이는 다양한 언어의 문자를 올바르게 표시하기 위한 표준 인코딩 방식입니다.
-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!--
<meta name="viewport"> 태그는 웹 페이지의 뷰포트 설정을 정의합니다.
- width=device-width: 페이지 너비를 장치 화면 너비에 맞춥니다.
- initial-scale=1: 페이지가 처음 로드될 때 줌 레벨을 1배로 설정합니다.
- shrink-to-fit=no (iOS 9 이전 버전): 사용자 스케일링을 방지하여 모바일 환경에서 반응형 웹 디자인을 지원합니다.
이는 모바일 기기에서 웹 페이지가 올바르게 표시되도록 하는 데 필수적입니다.
-->
<meta name="theme-color" content="#000000" />
<!--
<meta name="theme-color"> 태그는 안드로이드 Chrome과 같은 모바일 브라우저의 주소 표시줄 색상을 설정합니다.
여기서는 검은색(#000000)으로 설정되어 있습니다.
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest"> 태그는 웹 앱 매니페스트 파일을 연결합니다.
이 파일은 PWA(Progressive Web App)를 위한 앱의 이름, 아이콘, 시작 URL 등을 정의하여
사용자가 웹 페이지를 모바일 기기의 홈 화면에 추가할 수 있도록 합니다.
%PUBLIC_URL%은 빌드 시 실제 퍼블릭 경로로 대체됩니다.
-->
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
<link rel="shortcut icon"> 태그는 웹 페이지의 파비콘(사이트 아이콘)을 연결합니다.
브라우저 탭, 즐겨찾기, 북마크 등에 표시되는 작은 아이콘입니다.
%PUBLIC_URL%은 빌드 시 실제 퍼블릭 경로로 대체됩니다.
-->
<title>React App</title>
<!--
<title> 태그는 웹 페이지의 제목을 정의합니다.
이 제목은 브라우저 탭 또는 창의 제목 표시줄에 표시되며, 검색 엔진 결과에도 사용됩니다.
-->
</head>
<body>
<!--
<body> 섹션은 웹 페이지의 실제 내용을 포함합니다.
사용자가 브라우저 화면에서 볼 수 있는 모든 요소(텍스트, 이미지, 링크 등)가 이곳에 위치합니다.
-->
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!--
<noscript> 태그는 사용자의 브라우저에서 JavaScript가 비활성화되어 있거나 지원되지 않을 때 표시될 콘텐츠를 정의합니다.
React 애플리케이션은 JavaScript 기반이므로, JavaScript가 없으면 실행되지 않습니다.
-->
<div id="root"></div>
<!--
<div id="root"> 태그는 React 애플리케이션이 마운트(렌더링)되는 지점입니다.
JavaScript 코드는 이 'root' 요소를 찾아 그 안에 React 컴포넌트들을 삽입하여 웹 페이지를 구성합니다.
모든 React 컴포넌트는 사실상 이 div 안에서 렌더링됩니다.
-->
</body>
</html>
'생활코딩! React 리액트 프로그래밍' 카테고리의 다른 글
| egoing - React - event (0) | 2025.06.21 |
|---|---|
| egoing - React - props - array (0) | 2025.06.21 |
| egoing - React - props (0) | 2025.06.21 |
| egoing - React - component (0) | 2025.06.20 |
| egoing - React - Source (0) | 2025.06.19 |