[리엑트(React)] 리엑트(React)란?

리엑트란?

리엑트는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
2013년에 페이스북에서 만들었다.

리엑트는 자바스크립트 코드를 HTML 처럼 작성하는 문법(JSX)을 제공한다
이러한 코드를 HTML 코드로 변환 및 랜더링하여 웹무서 인터페이스를 만든다

장점 : 빠르다, 한 페이지를 동적으로운용할 수 있다(가볍다) - SPA(single page application), 인지도 높다
단점 : 어렵다, 웹문서에 필요한 모든 것을 제공하지는 않는다.

 

리액트 동작 원리

트랜스파일러

: 최신 자바스크립트 문법 + JSX

등을 웹브라우저가 쓸 수 있도록 변환!

 

JSX

: 리액트 문법, 자바스크립트 HTML을 조합한 문법이다.

마치 태그와 같은 형태를 띈 코드를 사용하여 자바스크립트로 제어할 수 있는 요소를 JS 파일 안에 작성한다.

ex) <NameList items = {items} />

 

SPA(Single Page Applicaton)

: 단 하나의 정적인 페이지를 동적으로 렌더링해가며 사용하는 앱

이것을 만들 때 리액트가 매우 유용하다.

 

트랜스파일링

: 브라우저에서 호환되지 않는 최신 문법이나 JSX 등의 특수한 문법을, 호환하는 자바스크립트 코드로 변환해주는 작업

- 이러한 작업을 수행하는 소프트웨어 : 트랜스파일러

- 대표적인 트랜스파일러 : babel

 

 

모듈 번들러(module bundler)

: 리액트 등의 어플리케이션을 사용할 때, 파일이 많아짐에 따라 이것들이 병합되지 않는 현상을 보조해주는 소프트웨어

- 대표적인 번들러 : webpack

다수의 모듈을 하나의 프로젝트로 묶어주는 기능

 

CRA (create-react-app)

: 리액트 어플리케이션을 만드는 데 있어 필요한 기초 사항들(정적 파일, 모듈 번들러, 트랜스파일러, 문서 구조 등)을 한 번에 완성하여 제공해주는 소프트웨어(보일러플레이트)

 

npx

: 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지이다. CRA 경우는 반드시 npx 로 설치하도록 정해져 있다.

 

리액트 설치

리액트(react)를 사용하기 위해선 먼저 npx를 설치해야한다.

 

명령 프롬프트를 열어 아래 코드를 입력하여 npx 설치

(npm install -g npx)

설치 완료가 되었으면 편집기의 terminal로 들어가 npx create-react-app (파일명) 입력

 

 그러면 아래와 같은 패키지가 설치 완료 된다.

 

구성 요소를 살펴 보자면

일단 package.json을 볼 수 있다. react가 node 기반으로 만들어졌다는 뜻.

 

public 에 보면 유일한 html 문서를 볼 수 있다,

 

주석을 지우고 살펴보면 다음과 같다.

 

 

이를 npm start를 통해 application을 실행시켜 보자

 

아래와 같이 구성되어 있는 sample application 웹이 열리게 된다.

 

그러면 우리가 원하는 구성의 웹을 만드려면 어떻게 해야 할까

일단 src로 이동해 보자

그럼 여러 파일들이 있는데 먼저 index.js를 살펴보자면 다음과 같다.

 

다음은 App.js를 살펴보자

 

이 코드가 앞서 웹을 실행시켰을때 보여준 화면을 표시하는 코드이다.

약간 수정을 해보면

 

어떤 식으로 써야되는지 감이 올 것이다.

App 이라는 컴포넌트를  js 문법으로 만들어서 export 해주면 index.js 에서 렌더링을 해주는 방식이다.

 

예시로 하나 만들어 보자면

 

이런 식이다.

 

예시2) 클래스 기반 컴포넌트

 

App.js

import React from 'react'
import Book from './Book'
// 클래스 기반의 컴포넌트
// => 이때는 리액트 컴포넌트를 상속받아 만든다!
class App extends React.Component{
  // 클래스 기반의 컴포넌트에서는 이 메소드가 필수!
  render(){
    return <div>안녕하세요 나는 클래스 기반 컴포넌트에요
    <Book />
    <Book />
    <Book />
    </div>
  }
}
export default App;

임의로 만든 Book.js

import React from 'react'

class Book extends React.Component{

    render(){
        return <h1>조지 오웰의 1984</h1>
    }
}

export default Book

index.js

import React from 'react'; // const React = require("react")
import ReactDOM from 'react-dom';
import './index.css'; 
import App from './App'; // const App = require("./App")
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

예시3) 나만의 Application 만들기(feat. 커스텀 속성)

다른 sample 파일을 만들어 application을 구성해보자

 

일단 불필요한 것들 다 지우기. 

이렇게 남겼다.

 

index.js

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

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

App.js

import React from 'react';
import './App.css';
import Animal from './components/Animal'
import Meal from './components/Meal'
class App extends React.Component{

  render(){
   
   return <div>
     <div id="animals">
      <Animal species="호랑이" habitat="산골"/>
      <Animal species="하마" habitat="습지"/>
      <Animal species="코뿔소" habitat="초원"/>
    </div>
     <Meal when="dinner" />
     <Meal when="breakfast" />
   </div>
  }
}

export default App;

App.css

h1{
  font-size: 30px;
  color: blue;
}

Animal.js

import React from 'react'

class Animal extends React.Component{

  // 컴포넌트에 커스텀 속성이 전달되면, 이를 객체로 처리할 수 있다!
  // 해당 객체의 이름은 props 이다! 

  // 단순 텍스트가 자바스크립트 표현식으로 바뀌도록 해주는,
  // 자바스크립트 식 괄호를 사용해줘야 한다.
    render(){
        return <h1>
            {this.props.species}는 {this.props.habitat}에 사는 동물이다.
        </h1>
    }
}

export default Animal

Meal.js

import React from 'react'

// 식사 시기에 따라 다른 결과물을 랜더링하는 Meal!
// {자바스크립트식} 안에는 하나의 값이 요구된다!
// JSX 내부에서는 주석 또한 자바스크립트식으로 표현해야 한다!
class Meal extends React.Component{
    render(){
        return <div>
            {/* JSX 내부에서 주석을 쓰는 방법 */}
            {this.props.when == "dinner" ? "삼겹살 먹자!" : "샌드위치 먹자!"}
            {/* Meal의 속성 when 값에 따라 다르게 출력*/}
        </div>
    }
}

export default Meal

 

여기서 컴포넌트에게 값을 전달하기 위해 props를 사용하였는데

props란 properties의 줄임말로서, 컴포넌트의 입력값이다. 

props는 부모 컴포넌트로 부터 자식 컴포넌트로 전달된 데이터를 의미한다.

(props는 state와 달리 read-only)