리액트 기초 및 환경 구축 과 디렉토리 구조

REACT

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

사용자 정의 태그를 만드는 기술이다.

React 환경 구축

새 폴더 생성 → visual Studio로 생성한 폴더 열기 → NodeJs.org(node.js 공홈에서 설치 )

→ Vs code 터미널 에서 npx create-react-app . 입력 ( 현재 폴더에 리액트 설치하는 명령어 ) → 설치 완료가 되면 react app 이 브라우저를 통해 자동 실행됨

 

 

---

 

React 디렉토리 구조

- create-react-app 을 통해 리액트 설치시 어떤 디렉토리 구조를 가지는가?

<react 파일 구조 >

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

주요 디렉토리 및 파일 설명

• node_modules/: 프로젝트 의존성이 설치되는 폴더 ,**npm install**을 통해 설치된 모든 패키지와 라이브러리가 이곳에 위치.
• public/: 정적 파일(HTML, 이미지, 기타 공개적으로 접근 가능한 리소스)을 담는 폴더, **index.html**은 애플리케이션의 HTML 템플릿 파일입니다.
  • favicon.ico: 웹 페이지의 탭 아이콘입니다.
  • index.html: 메인 HTML 파일로, 리액트 앱이 마운트되는 곳입니다.
  • manifest.json: 웹 애플리케이션의 메타 데이터를 정의하는 파일로, 웹 앱을 PWA(Progressive Web App)로 만드는 데 사용됩니다.
  • robots.txt: 웹 크롤러에게 사이트를 어떻게 크롤링하고 인덱싱해야 하는지 알려주는 파일입니다.
• src/: 애플리케이션의 소스 코드를 포함하는 폴더입니다. 여기에는 자바스크립트, CSS, 테스트 파일 등이 포함됩니다.
  • App.js: 애플리케이션의 루트 컴포넌트입니다.
  • index.js: 애플리케이션의 진입점입니다. 여기서 **ReactDOM.render**를 사용하여 앱을 DOM에 렌더링합니다.
• .gitignore: Git 버전 관리 시 무시할 파일 목록을 지정합니다.
• package-lock.json: 프로젝트의 의존성 트리에 대한 정확한 정보를 담고 있어, 다른 환경에서도 동일한 의존성을 설치할 수 있게 해줍니다.
• package.json: 프로젝트의 메타데이터와 의존성 목록을 담고 있는 파일입니다. 또한 스크립트와 프로젝트 설정도 포함됩니다.
• README.md: 프로젝트에 대한 설명, 설정 방법, 사용 방법 등을 담은 마크다운 파일입니다.

 

---

- ui 구현은 어떻게 이루어질까?

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <App />  ui 전체 */}
    <App /> 
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 1. 모듈 임포트
- `import React from 'react';`: React 라이브러리를 임포트합니다. JSX를 사용하기 위해 필요합니다.
- `import ReactDOM from 'react-dom/client';`: React 18 이상 버전에서는 `react-dom/client` 모듈을 사용하여 DOM에 접근하고 조작합니다. 이를 통해 React 컴포넌트를 웹 페이지에 렌더링합니다.
- `import './index.css';`: 애플리케이션의 전역 스타일을 적용하기 위해 CSS 파일을 임포트합니다.
- `import App from './App';`: App 컴포넌트(애플리케이션의 루트 컴포넌트)를 임포트합니다.
- `import reportWebVitals from './reportWebVitals';`: 애플리케이션의 성능 측정을 위한 함수를 임포트합니다.

2. 루트 DOM 노드 선택
- `const root = ReactDOM.createRoot(document.getElementById('root'));`: 웹 페이지의 HTML 내에 `<div id="root"></div>`로 지정된 DOM 요소를 선택하고, 이를 리액트의 루트 컨테이너로 생성합니다.

3. React 컴포넌트 렌더링
- `root.render()`: 선택한 루트 DOM 노드에 React 컴포넌트를 렌더링하는 메소드입니다. 여기서는 `App` 컴포넌트를 렌더링합니다.
- `<React.StrictMode>`: 개발 모드에서 React 애플리케이션의 잠재적 문제를 검출하기 위해 사용됩니다. 부작용, 레거시 API 사용, 불필요한 리렌더 등을 경고합니다.
- `<App />`: 애플리케이션의 메인 컴포넌트입니다. 이 컴포넌트는 애플리케이션의 UI를 정의하고, 다른 자식 컴포넌트들을 포함할 수 있습니다.

 4. 성능 측정
- `reportWebVitals()`: 애플리케이션의 성능을 측정하고, 이를 콘솔에 로그하거나 분석 엔드포인트로 보낼 수 있습니다. 이 코드는 성능 모니터링을 위한 선택적 기능이며, 주석 처리되어 기본적으로는 활성화되지 않습니다.

리액트 UI 구현 과정 요약
1. 필요한 모듈과 스타일을 임포트합니다.
2. 웹 페이지 내의 특정 DOM 요소(`id="root"`)를 리액트의 루트 컨테이너로 선택합니다.
3. `App` 컴포넌트를 포함한 리액트 애플리케이션을 루트 컨테이너에 렌더링합니다. 이 과정에서 `App` 컴포넌트와 그 자식 컴포넌트들로 구성된 UI가 웹 페이지에 나타납니다.
4. 개발자는 선택적으로 애플리케이션의 성능을 측정하고 모니터링할 수 있습니다.