React 입문 - 2

React 설치, 시작, 시작 후 기본 구성요소에 대해

KYJTHEYJ

Dec 03, 2025

Contents

React Project 시작 React Project 빌드시 기본 구성 요소

React Project 시작

React 시작
- npx create-react-app [name]
  - npx와 npm의 차이
    - npm (Node Package Manager) → 패키지를 설치하고 실행
    - npx (Node Package Execute) → 패키지 설치 않고 바로 실행
  - create-react-app → React 프로젝트를 시작하는 패키지명
  💡
  CRA는 Deprecated 되었음
- npm create vite@latest [name]
  - Vite 는 React 빌드 도구
  - 파일만 살짝 다르고 CRA와 거의 비슷 (jsx 사용)
💡
물론 Next.js도 있지만 이제 입문하려는 단계니 Vite 사용하려함

React Project 빌드시 기본 구성 요소

Vite 사용하여 빌드시 아래와 같은 구성요소를 지닌 React 프로젝트를 갖게됨
- public → 정적 파일을 담는 용도의 폴더
  - 정적 파일 (자동으로 데이터가 변화되지 않는 정적 파일들)
    - 파비콘, 이미지, 폰트 파일, 안내 텍스트파일 등등..
    - 사용시 직경로로 / 를 통해 사용함 → /vite.svg 로 바로 사용
- src 내부
  - asset → 이미지, 폰트 등의 리소스를 담음
  - App.jsx → 메인 컴포넌트
    - 앱의 메인 화면
    - 여기서 컴포넌트들을 조합하여 작업을 시작함
  - index.css → 전역 스타일 (모든 페이지에 적용됨)
  - main.jsx → 진입점
    - 동작 순서
      - index.html이 로드 되면
      - (진입점) main.jsx 실행 하고 App.jsx를 import
      - App.jsx 렌더링 하여 컴포넌트들을 import
      - 화면에 표시!
  - eslint.config.js → 코드 검사

내부 코드들 분석

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
   <!-- favicon -->
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>first React!</title>
  </head>
  <body>
   <!-- React 어플리케이션이 여기서 렌더링 되어 화면 구성 -->
    <div id="root"></div>

   <!-- main.jsx 를 불러옴 (앱의 진입점) -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx
```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

// 이 파일이 가장 먼저 실행
// ReactDOM -> React를 실제 DOM에 연결해주는 역할 (가상 DOM은 아님)
// React가 가상 DOM을 실제 DOM에 반영하기 위해 ReactDOM을 통해 렌더링
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```
- React 라이브러리를 react 라는 이름으로 사용하고 →
  실제 DOM을 조작하기 위한 ReactDOM을 가져오고 →
  App.jsx에 명시된 컴포넌트를 가져와서 (전역 css인 index.css도) →
  ReactDOM 이 앱을 위한 root를 실제 DOM의 id가 root인 요소에 만든다 →
  App.jsx에 명시된 컴포넌트를 렌더링한 것을 (<App />)
  - StrictMode → 불안정한 생명주기, 부작용, Deprecated 가 있을 때
    개발 모드에서 경고하기 위함이라 한다 (없어도 됨)
  - render → React 컴포넌트를 실제 화면에 그려주는 함수
  - JSX 화 → 이런 React 전용 자바스크립트 파일을 태그화 한 것

App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

App 이라는 이름으로 사용되는 메인 컴포넌트

JS 코드와 Html의 태그가 공존하는데 ?
- React는 ‘babel’ 이라는 라이브러리를 사용함, 이 라이브러리의 기능
useState(0) ?
```
const [count, setCount] = useState(0);
//     ─────  ────────             ─
//    보는 변수 바꾸는 함수            처음값
```
- 위와 같은 형식을 지닌 React 내의 함수 → 이를 Hook 이라고 부름
- 보면 클릭 이벤트에서 1씩 증대 될때 화면 값을 setCount 함수로 처리
  이 걸 이제 useState를 통해서 React 가 감지해서 화면에 1이 보임

Contents

React Project 시작 React Project 빌드시 기본 구성 요소

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" />  <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>first React!</title> </head> <body>  <div id="root"></div>  <script type="module" src="/src/main.jsx"></script> </body> </html>

import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' // 이 파일이 가장 먼저 실행 // ReactDOM -> React를 실제 DOM에 연결해주는 역할 (가상 DOM은 아님) // React가 가상 DOM을 실제 DOM에 반영하기 위해 ReactDOM을 통해 렌더링 createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, )

import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <div> <a href="https://vite.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.jsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ) } export default App