리액트(React)

(저는 vscode로 진행했습니다!)

• 정의: React는 JavaScript 기반의 UI 라이브러리로, SPA(Single Page Application) 개발에 주로 사용됩니다.
• 특징: JSX를 사용해 템플릿과 스크립트를 한 파일에 작성하며, 컴포넌트 기반으로 동작합니다.
• 장점:
  - SPA(Single Page Application): 빠른 렌더링과 업데이트
  - 컴포넌트 재사용
  - 독립적인 컴포넌트 구조
  - 모바일 앱 개발 가능(React Native)
• 단점: 상태 관리가 복잡할 수 있음(Redux, Recoil 등으로 보완 가능)

리액트 주요 요소

1. JSX

• JavaScript와 HTML을 결합한 문법입니다.
  -HTML 태그를 JavaScript 코드 내부에서 작성할 수 있게 해줍니다.

2. 컴포넌트

• UI를 구성하는 기본 단위입니다.
• 함수형(Function Component) 또는 클래스형(Class Component)으로 작성할 수 있습니다.
• 재사용성과 독립적인 구조를 갖추고 있습니다.

3. 엘리먼트

• React 컴포넌트가 반환하는 가장 작은 UI 단위입니다.
• 불변(immutable) 속성을 가집니다.

React 프로젝트 생성

1. 환경 설정: Node.js와 npm 설치 필수입니다.

2. 원하는 위치에 파일을 생성 (위치 복사해두기)

3. cmd에서 cd <파일 위치> 명령어로 이동합니다.

2. 프로젝트 생성 명령어

npx create-react-app <프로젝트 이름(소문자만 가능)>
npx create-react-app react-study

프로젝트 생성이 완료되면, 아래와 같이 잘 만들어진 파일들을 확인할 수 있습니다.

• 간단하게 설명:
  - node_modules: 라이브러리 코드가 보관된 폴더입니다.
  • public: 정적 파일(static)들이 들어 있는 폴더입니다.
  • src: 실제로 코드를 작성하는 폴더입니다.

src/index.js는 무엇인가?

• React 애플리케이션의 시작점입니다.
  1. index.js에서 애플리케이션의 시작점을 설정하고, import를 통해 화면에 보여줄 컴포넌트(App.js)를 불러옵니다.
  2. document.getElementById('root') : public/index.html 파일에 있는 <div id="root"></div>을 찾아서 React가 화면을 그릴 공간으로 사용합니다.
  3. 해당 공간에 컴포넌트(App.js)를 root에 렌더링(브라우저에 표시)합니다.
  

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 프로젝트 실행

npm start

이 명령어를 입력하면, 프로젝트가 실행되며 웹 페이지가 나타나게 됩니다. 이 페이지가 정상적으로 보이면 성공입니다!

왜 App.js는 JavaScript 파일인데 HTML 파일처럼 보일까?

보통의 웹 페이지는 HTML 파일로 이루어져 있어야 합니다. 그런데 App.js는 JavaScript 파일에 코드가 작성되어 있습니다. 이는 React 애플리케이션에서 App.js에 작성된 코드들을 index.js가 public/index.html의 <div id="root"></div>라는 공간에 동적으로 삽입하기 때문입니다. 즉, index.js는 App.js의 컴포넌트를 HTML 페이지에 렌더링하여 웹 브라우저에서 볼 수 있도록 만드는 역할을 합니다.