connecting dots

npx create-react-app 구조 살펴보기, react 실행하기, SPA이란 ?, JSX란 ? 본문

Online Class/DevCamp

npx create-react-app 구조 살펴보기, react 실행하기, SPA이란 ?, JSX란 ?

dearsuhyun 2024. 7. 17. 11:12

이름이 수정되면 안되는 파일들

1. public/index.html --> 페이지 템플릿 역할

2. src/index.js --> 자바스크립트의 시작점 역할

 

 

 

 

 

 

=> public 내부의 파일만

public/index.html에서 사용할 수 있음

 

 

 

 

 

 

 

 

=> 여기에 js 파일과 css 파일들을 넣으면 됨

webpack은 여기에 있는 파일만 봄

그래서 이 폴더 이외에 넣는 것은 webpack에 의해서

처리되지 않음 !

 

=> 대부분의 리액트 소스코드를 여기다가 작성하게 됨

 

 

 

 

 

 

=>  package.json

해당 프로젝트에 대한 정보들이 들어있음

프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있음.

앱 시작시 사용할 스크립트, 앱 빌드할 때나 테스트할 때 사용할 스크립트 등이 명시되어 있음

 

 

 

 

필요한 라이브러리와

라이브러리의 버전들이 명시됨

 

 

 

 

 

=> 리액트 앱 실행, 빌드, 테스트 등의 스트립트가 명시되어 있음. 프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능함

=> 소스코드를 입력할 때 문법이나 코드 포맷을 체크해주는 것에 대한 설정 명시

 

 

 

 

리액트 실행

package.json --> start 보고 실행

 "scripts": {
    "start": "react-scripts start", // npm run start
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

 

--> 어떤 메카니즘으로 이 페이지가 뜨는걸까 ?

 

1. index.html : 페이지 템플릿

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

 

--> html <body>안에는 내용이 없는데 어떻게 저런 화면이 뜨지 ?

 

 

2. app.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

--> 지금 화면에 뜨는 컨텐츠를 app.js가 가지고 있음

 

 

3. index.js : 자바스크립트의 시작점

이 코드는 React 애플리케이션의 진입점(entry point)입니다.

이 코드는 index.js 파일에 위치하며, 애플리케이션을 브라우저의 DOM에 렌더링합니다.

import React from 'react'; // React 라이브러리를 가져옵니다. React는 컴포넌트 기반의 UI 라이브러리로, 사용자 인터페이스를 만들 때 사용됩니다.
import ReactDOM from 'react-dom/client'; // ReactDOM 라이브러리를 가져와서, React 컴포넌트를 실제 DOM에 렌더링하는 데 사용합니다.
import './index.css';
import App from './App'; // 메인 컴포넌트인 App을 가져옵니다. App 컴포넌트는 애플리케이션의 루트 컴포넌트로, 다른 모든 컴포넌트를 포함합니다.
import reportWebVitals from './reportWebVitals'; // 웹 성능 측정을 위한 도구를 가져옵니다. 성능 측정 결과를 로깅하거나 분석 서버로 전송할 수 있습니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
// createRoot 메서드를 사용하여 렌더링할 준비를 합니다.
// HTML 문서에서 id가 root인 요소를 찾습니다. 이 요소는 public/index.html 파일에 정의되어 있습니다.
root.render( // App 컴포넌트를 렌더링합니다.
  <React.StrictMode>
    <App />
  </React.StrictMode>
  // React.StrictMode로 App 컴포넌트를 감싸서 렌더링합니다. 이는 개발 모드에서 잠재적인 문제를 감지하고 경고를 표시하는 도구입니다.
);

reportWebVitals();
// reportWebVitals(): 성능 측정을 시작합니다. 성능 측정 결과를 로깅하거나 분석 서버로 전송할 수 있습니다. 예를 들어, reportWebVitals(console.log)와 같이 사용할 수 있습니다.

--> id가 root인 div 엘리먼트를 잡아줌.(index.html에서) 그 안에서 화면을 꾸밀 수 있음.

 

SPA(single page aplication)이란 ?

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

cf. 전통적인 방식(MPA multi page application)


history API란 ?

a page에서 b page로 페이지를 전환할 때 a html을 보여주다가 b html을 보여주면 됐음.

SPA에서는 ? html 5의 history AP를 사용해서 이를 가능하게 만듬 ! (react-router-dom)

= 자바스크립트 영역에서 history API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것 처럼 작동하게 해줌

 

histoty.back() 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드
브라우저의 뒤로가기를 누르는 것과 같은 효과를 낸다
history.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드
브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다
history.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드
1을 넣어 호출하면 바로 앞 페이지로,
-1을 넣어 호출하면 바로 뒤 페이지로 이동한다
history.pushState() 주어진 데이터를 세션 기록 스택에 넣는다
직렬화 가능한 모든 js 객체를 저장하는 것이 가능하다
history.replaceState() 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다

 

 

JSX란 ?

javascript syntax extension

자바스크립트의 확장 문법

리액트에서 이를 이용해서 화면에서 UI가 보이는 모습을 나타내 줌

--> UI를 나타낼 때 자바스크립트 로직과 html 구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것, 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있음 !

 

리액트에서 JSX 사용은 의무인가 ?

의무는 아니지만 너무 편리해서 거의 모든 사람이 사용함

 

- 원래 리액트에서 화면을 그리는 방식 

react createElement API를 사용해서 엘리먼트를 생성한 후 (객체가 됨)

이 엘리먼트를 inMemory에 저장함.

그리고 reactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줌

 

--> 모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들 수는 없음

--> JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용함

 

JSX를 사용하면서 주의해야 할 문법(규칙)

JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 함

// 잘못된 코드
function hello() {
  return (
      <div>hello world!</div>
      <div>what are you doing</div>
      )
}

// 올바른 코드
function hello() {
  return <div>
      <div>hello world!</div>
      <div>what are you doing</div>
      </div>;
}

 

반응형

'Online Class > DevCamp' 카테고리의 다른 글

React - 예산 계산기 앱 만들기 | JSX Key 속성, filter 메소드, React State, super (props), state와 super  (0) 2024.07.19
React - 예산 계산기 앱 만들기 | Props(컴포넌트 간 데이터 전달), map(지출 목록 나열)  (1) 2024.07.17
Typescript VS Javascript, node.js & npm  (0) 2024.07.17
웹 앱의 구성요소, 모던 Javascript와 개발 환경  (0) 2024.07.16
React | 리액트 기본  (5) 2024.07.16
'Online Class/DevCamp' Related Articles more