Ch.Covelope

React 시작하기. 본문

React

React 시작하기.

Chrysans 2022. 1. 18. 00:49
반응형

 

 

React

 

 

 

https://ko.reactjs.org/

 

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

A JavaScript library for building user interfaces

ko.reactjs.org

 

React Facebook 에서 만든 제이쿼리 와 같은 프론트엔드 라이브러리이다. (Angular, Blazor 는 프레임워크);

그래서 우리는 필요한 만큼한 가져와서 사용할 수 있다.

 

 

  • 컴포넌트 기반으로 유지보수와 재사용에 용이
  • Virtual DOM 으로 수정되는 부부만 업데이트
  • JSX (JavaScript + HTML)
  • 싱글 페이지 애플리케이션(SPA)을 구현하기 좋다. 사용자 경험 ↑(링크가 바뀌지 않는다.)
  • 선언형 프로그래밍.
  • 명령형 프로그래밍은 How (어떻게) 에 집중하고 선언형은 What (무엇을)에 집중한다.

 

 

 

생성 방법

 

노드가 설치된 환경에서 터미널을 실행하고 아래 명령어를 실행하면 리액트 프로젝트를 사용할 수 있는 환경이 완성된다.

  •  Node 14.0.0 이상 또는 npm 5.6 이상의 버전을 필요로 하고 npx는 npm의 도구이며 npm의 5.2.0 이상에서 지원한다. (2개가 다른 것이 아님) (node package manager)
npx create-react-app my-app

 

 

 

 

설치가 완료되면 위에 같은 파일과 폴더들이 생성된다.

 

 

 

npm start

터미널이 설치된 경로로 되어있는지 확인한 후 위 명령어를 입력하면 리액트가 실행되고 웹페이지가 실행된다.

 

 

 

성공적으로 실행된 모습!

 

 

 

 

 

src/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;

 

설치된 폴더 src에 App.js 파일을 보면 기존에 알던 코드가 아닌 javascript 와 html이 합쳐진 혼종이 보이는데 이게 JSX (javascript Extention) 자바스크립트 표현식이다.

 

 

 

 

 

 

 

src/index.js

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

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

// 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();

 

그리고 src에 index.js를 보면 다른 거 다 빼고 ReactDOM.render 안에 Id 선택자로 root를 선택하고 있고  <App/> 이 보인다. 대충 짐작하면 리액트가 id가 root인 엘리먼트에 App을 렌더링 한다라고 보인다. 여기서 App은 위에서 보았던 App.js이다.

 

 

 

 

 

 

 

public/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" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>React App</title>
  </head>
  <body>
  
    <div id="root"></div>
   
  </body>
</html>

위에 index.js 에서 root인 엘리먼트가 index.html 에 있는데 index.js 에서 app.js를 가져오고 그걸 다시 index.html로 가져와서 화면에 그려진다. 뭔가 연결에 연결에 연결이라 처음에는 헷갈리고 혼란스러웠는데 결국에 보여줄 페이지가 많아도  html 은 하나이고 컴포넌트들과 라우터로 구성되어 리액트 공식 홈페이지와 같이 다른 페이지나 사이트 내부에서 이동시에도 깜빡임이나 새로고침 없이 빠르게 동작할 수 있다. (초기 렌더링 후 데이터만 받아오기 때문에, 상대적으로 서버 요청이 적다)

 

 

 

 

 

 

 

https://github.com/chry8822

 

chry8822 - Overview

‘Keep true to the dreams of thy youth’ . chry8822 has 20 repositories available. Follow their code on GitHub.

github.com

 

 

 

 

 

728x90
반응형
저작자표시

'React' 카테고리의 다른 글

리액트(react) - JSX(JavaScript XML) 란 .feat(symbol)  (0) 2023.04.26
React(리액트) 하위 컴포넌트에서 데이터(data) 받아서 상위 컴포넌트로 전달.  (0) 2022.05.17
React(리액트) Hook - useState, uesEffect, useRef, useCallback, useMemo  (0) 2022.03.14
리액트(React)에서 Sass(SCSS)사용하기  (0) 2022.03.07
React Router v6 업데이트, 바뀐점  (0) 2022.02.09
공유하기 링크
'React' Related Articles more
Comments