[React] React란

React

React는 facebook에서 개발하고 전세계적으로 제일 많이 사용하고 있는 자바스크립트 오픈 라이브러리입니다.

기본적으로 SPA(Single Page Application)을 지원하고 Component 기반의 개발을 할 수 있습니다.

SPA에 대표적인 종류로는 Vue, Anglur, React가 있으며 Vue는 프레임워크로 전체적인 틀을 제공해주는 반면에
React는 라이브러리로 개발자의 개발방향에 맞게 자유롭게 개발할 수 있으며 자바스크립트 문법을 숙지해야합니다.

React를 사용하는 이유

html에서 이벤트 동작시 데이터가 변경되고 부분적으로 리랜더링하는 것을 ajax를 통해 해결해 왔습니다.

하지만 프로젝트 규모가 커짐에 따라 유저와의 상호작용이 많아지고 많은 연산이 일어나고 ajax는 직접적으로 DOM을 수정하기 때문에 최적화를 하는 개발자 입장에서는 부담이 될 수 밖에 없습니다.

Virtual DOM
React는 가상돔을 사용하며 변경되는 데이터를 감지하고 해당 component 부분만을 변경합니다.

component
component는 작은 단위로 중복코드를 제거하고 유지보수를 용이하게합니다.

이러한 이유로 React는 많은 사람들이 사용하고 있습니다.

라이브러리, 프레임워크

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

공식사이트에서는 React를 라이브러리라고 말하고 있습니다.
하지만 React는 라이브러리이면서 프레임워크라고 말할 수 있습니다.

라이브러리는 내가 필요한경우 불러 사용할 수 있으며, 프레임워크는 프레임워크가 나를 부르는 것입니다.

리엑트는 라이브러리이지만 component 같이 정해진 틀에 의해서 사용하는 것이기 때문에 프레임워크의 성질도 가지고 있습니다.

React를 추가하는 방법

1. HTML로 구성되어 있는 프로젝트에서 특정 부분에서만 React component를 사용할 수 있습니다
   HTML-to-React
2. React 프로젝트(CRA)로 구성하여 사용할 수 있습니다.
   CRA

npx create-react-app my-project-name

폴더 구조

my-project-name
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src 
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

React 패키지

React 프로젝트를 생성하는 CRA에는 기본적으로 필요한 패키지가 추가되어 있는데 크게 2가지로 Babel, Webpack입니다.

CRA에는 내부적으로 Babel과 Webpack이 설정되어 있습니다.

Babel

웹은 HTML, CSS, JS 3가지로 구성되어 실행이 됩니다.
React는 JSX라는 문법을 사용하며 웹에서 실행이 되기위해선 JS로 컴파일 과정을 거쳐야합니다.

이러한 JS 컴파일러를 Babel이라고 합니다.

• ES 버젼 호환
• JSX를 스크립트로 컴파일

1. npm init
2. npm install react react-dom
3. src, public 디렉토리 구조화
4. npm i -D @babel/core @babel/cli @babel/preset-react / npm i -D @babel/preset-env
5. npx babel [dir] --presets=@babel/preset-react

# babel.config.js 설정으로 간편화 가능

Webpack

웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다. 분리된 JS,CSS 모듈코드를 브라우저에 최적화된 파일로 결합해줍니다.
Webpack

1. npm i -D webpack webpack-cli html-webpack-plugin babel-loader
2. webpack.config.js 설정
3. npx webpact 시 dist dir에 번들링되어 파일이 생성된다 (라이브 서버로 확인시 정상 작동)
4. webpack-dev-server 서버는 파일의 변경을 감지하여 번들링을 진행해준다.
5. html-webpack-plugin 는 html을 번들링해준다
6. babel-loader는 webpack을 동작시 babel을 사용할 수 있도록 해준다.

JSX

JSX는 Javascript를 확장한 문법으로, JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.
HTML보다는 Javascript에 가깝기 때문에 카멜케이스를 적용합니다.

# html
<div class="name"></div>

# JSX
<div className="name"></div>

• class와 같이 html 예약어는 사용하지 못하기 때문에 className, tabIndex, htmlFor 와 같이 사용합니다.

Component

컴포넌트는 리엑트에서 빠질수 없는 중요한 개념중 하나로 UI를 재사용 가능한 조각으로 만들 수 있습니다.

컴포넌트를 생성하는 방법으로는 클래스형과 함수형 2가지 방법이 존재합니다.

클래스형(ES6)

클래스형은 React 모든 기능 사용이 가능하며 life cycle 메서드를 제공합니다.

import React, { Component } from "react";

class App extends Component {
    render(){
        return(
            <div>Hello, World</div>
        );
    }    
}

export default App;

함수형

함수형은 기능적 제한이 많아 클래스형을 보조하는 형태로 사용했었지만, React hook이 추가 되고 클래스형의 기능을 사용할 수 있게 되었습니다.

import React form "react";

// 함수형
function App(){
    return(
         <div>hello, world</div>
    )
}

export default App;