[ React ] React 입문 ①

[ React가 필요한 이유 ]

 

1. 다른 페이지에서도 공통적으로 사용되는 것이 예상되는 요소들을 별도의 파일이나 모듈로 제작해놓고 컴포넌트
형식으로 각각 필요한 파일마다 불러다 사용하는 방식이 페이지를 추가적으로 만들어야하는 상황에서 타이핑하는
코드가 확연하게 줄어든다. 

 

공통적으로 다른 페이지에서도 사용이 되기 때문에 재사용 되어야하는 요소들을 컴포넌트로 만들어서 사용하는

방식을 컴포넌트화 방식이라 한다.

 

컴포넌트화 방식은 컴포넌트가 정의된 파일 하나만 수정하게 되면 그 컴포넌트를 불러다 쓰는 다른 페이지들은
자동적으로 수정이 된다. 즉, 컴포넌트에 오류가 있거나 수정해야하는 상황이 생겼을 때 대처하기가 수월해지고

쉬워지기 때문에 유지보수하기 쉬워진다. 

 

기존 HTML으로만 사용했던 방식은 요소들을 컴포넌트화 해서 사용하기 어렵기 때문에 리액트를 사용하게 된다.

리액트는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 HTML 요소들을 모두 컴포넌트화 해서 재사용할 수
있다. 

 

2. 명령형 프로그래밍은 절차를 하나하나 다 나열하는 것이고 선언형 프로그래밍은 그냥 목적을 바로 말하는 것임.

명령형 프로그래밍의 가장 대표적인 기술은 jQuery이고 선언형 프로그래밍 방식의 대표적인 기술은 리액트이다.

 

웹 서비스의 프론트엔드 측면에서는 선언형 프로그래밍이 각광받고 있다.

 

3. 리액트의 가장 대표적인 특징으로는 Virtual DOM이 존재한다. 

 

DOM은 Document Object Model의 약자로 문서 객체 모델을 의미한다. 브라우저가 실제로 사용하는 객체로 
브라우저가 HTML을 자기 편한대로 해석할 수 있게끔 트리 형태로 변환해놓은 객체이다.

 

예를 들면 자바스크립트 코드인 append를 한번 사용할 경우 DOM 요소가 하나씩 추가되기 때문에 잦은 업데이트

상황에서는 브라우저가 필요 이상의 많은 연산을 수행해야 하므로 성능 저하 문제로 이어지게 된다.

 

성능 저하 문제를 해결하기 위해 리액트의 Virtual DOM을 사용하게 된다. 자바스크립트가 요소를 추가하는 과정에서

발생하는 변화를 실시간으로 업데이트 시키는 것이 아니라 가상의 돔에 미리 업데이트를 시키고 업데이트할 수 있는
부분을 모아서 한번에 리얼 돔으로 업데이트 시키는 방식으로 과다 연산을 해결할 수 있다.

 

---

[ Create React App ]

 

React.js : Node 기반의 자바스크립트 UI 라이브러리

 

리액트를 다방면에서 도와줄 라이브러리들이 필요하다.

① Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리

② Babel : 자바스크립트의 컴파일러로 JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는
                 라이브러리

→ 이미 세팅 완료된 패키지인  Boiler Plate를 사용

*  Boiler Plate : 미리 틀을 준비해서 쉽게 사용할 수 있게끔 이미 세팅 완료된 패키지이다.

 

1. React App을 만드는 방법

 

npx create-react-app 프로젝트명

 

* npx : npm을 편리하게 사용하기 위한 도구 → 설치되어있지 않은 패키지를 단 한번만 사용하고 싶을 때 사용

 

* npx가 잘 설치되어 있는지 확인하는 명령어 : 버전이 출력된다면 잘 설치되어있음

npx -v

 

* npm 버전 확인

npm -v

 

2. 파일 구성 확인하기

 

create-react-app 패키지도 node.js 기반의 패키지이기 때문에 기본 구성은 비슷하다.

 

3. react 실행하기

 

package.json안에 확인하면 scripts를 확인할 수 있다.

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

 

npm start

* 리액트를 실행할 때 루트 폴더 안에 있어야함

 

리액트를 실행한다면 실행시킨 컴퓨터는 웹 서버가 된다. 실행시킨 컴퓨터의 주소로 웹 사이트에 접속을 할 수 있다.

 

 

결론적으로 리액트 앱은 Node.js 기반의 웹 서버 위에서 동작하고 있다. 

* localhost는 자기 자신의 주소를 의미한다. 

 

4. react 종료하기 : Ctrl + c

 

---

< src 폴더 안의 App.js 확인하기 >

 

App.js안에 들어있는 App()가 리턴하는 HTML이 화면에 표시됨을 확인할 수 있다. 

 

 

< src 폴더 안의 index.js 확인하기 >

 

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 />
  </React.StrictMode>
);

 

App.js안에 있는 App을 import 해서 HTML 태그처럼 사용해 App 함수가 반환하는 값을 document의 ID가 root인
요소의 밑에 렌더하는 것을 알 수 있다. 

 

ID가 root인 요소는 src 폴더가 아니라 public 폴더의 index.html에 들어있다. 

즉, 리액트 앱이 실행이 되면 src 디렉토리 밑의 index.js가 실행이 되면서 public 디렉토리의 index.html의 ID가
root인 div 아래로 App.js안에 있는 app 함수가 리턴하는 값들이 들어간다. 

 

---

< 다른 디렉토리 살펴보기 >

1. node_modules : node.js 패키지의 구성 요소 중 하나로 외부 모듈을 저장하고 있는 디렉토리

* 리액트도 외부 모듈이기 때문에 node_modules에 들어있다. 

* create-react-app으로 만든 패키지는 굉장히 많은 node_modules를 가지고 있다. → 자동 설치

 

* 협업을 할 경우는 node_modules까지 파일을 전송하면 시간이 오래걸릴 수 있으므로 굳이 안보내도됨

만약 node_modules가 없는 패키지를 전송받았을 경우 npm i 명령어를 사용하게 되면 다시 node_modules가

다운 받아진다. ( npm i = npm install )

 

2. public 디렉토리

 

① manifest.json : 모바일 환경에서 웹 브라우저를 확인할 때 아이콘을 적용하거나 옵션을 설정할 경우 사용

② robots.txt : 구글이나 네이버가 웹 사이트를 수집할 때 경로를 알려주는 파일

 

3. src 디렉토리 : 다양한 소스가 들어있는 디렉토리

 

① App.css, index.css : css 파일

② App.js : 자바스크립트와 HTML이 합쳐져 있는 듯한 파일

 

JSX : 자바스크립트와 HTML을 합쳐서 사용할 수 있는 문법 

→ 자바스크립트의 변수나 함수 값을 HTML에 쉽게 사용할 수 있도록 해준다.

 

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

function App() {

  let name = "2chaechae";

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <h2>안녕하세요 {name} 블로그 입니다.</h2>

      </header>
    </div>
  );
}

export default App;

 

 

리액트는 별도의 HTML 요소들을 묶어서 모듈처럼 만들고 내보내 다른 파일에서 사용할 수 있는 컴포넌트화 방식을 

사용한다. 

 

* Node.js가 제공하는 Common JS 모듈 시스템과 다르게 리액트는 ES 모듈 시스템을 사용한다. 

 

export default App; // ES 모듈 시스템

module.exports = {}; // Common JS 모듈 시스템

 

ES 모듈 시스템을 통해 모듈을 내보내면 import를 통해 모듈을 불러올 수 있다.

(  Common JS 모듈 시스템은 require를 사용 )

 

import App from './App';

 

export default는 1개만 내보낼 수 있다.