3 분 소요

React

React란 프론트엔드 개발을 위한 JS 오픈소스 라이브러리이다.

특징

  • 선언형
    • 페이지를 보여주기 위해 HTML/CSS/JS로 나워서 적기 보다는 하나의 파일에 명시적으로 작성 -> JSX를 활용한 선언형 프로그래밍을 지향
    • 코드가 직관적
  • 컴포넌트 기반
    • 기능당 코드를 묶어둔 컴포넌트 기반으로 개발
    • 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능에 집중하여 개발 가능 -> 유지보수, 유닛테스트
  • 범용성
    • Js 라이브러리이기때문에 Js 프로젝트 어디에든 유연하게 적용 가능
    • 리엑트 네이티브를 통해 어플도 가능

JSX

  • JSX란 JavaScript XML의 줄임말로 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.
  • 그러나 브라우저가 바로 실행할 수 있는 코드는 아니며, “Babel”을 통해 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
  • 또한 React에서는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 어플리케이션을 개발할 수 있으며, 이는 컴포넌트 구현을 위한 코드의 복잡성을 줄이고 가독성을 좋게 해준다.

활용

  • JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
  • React에서 HTML class 속성을 지정하려면 className으로 표기해야 한다.
  • JSX에서 JavaScript를 쓰고자 한다면, 중괄호를 이용해야 한다. 중괄호가 아닌 경우 일반 텍스트로 인식한다.
  • React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 한다. 소문자로 시작할 경우 HTML 엘리먼트로 인식한다.
  • 조건부 랜더링은 if문이 아닌 삼항연산자를 이용해야 한다.
  • React에서 여러 개의 HTML 엘리먼트를 표시할 때는 “map()” 함수를 사용한다. 이때 “key” JSX 속성을 반드시 넣어야 한다.(인식값 오류 방지)

Component

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 root가 된다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조는 트리 구조로 형상화할 수 있다.

장점

  • HTML/JS와 달리 개편하고자하는 컴포넌트를 가져와서 독립적으로 수정할 수 있다.

Create React App

Create React App이란 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.

이는

$npx create-react-app [프로젝트 명]

명령어를 통해 Nodejs의 Babel, Zest, PostCss Module bundler, Webpack 등 React 개발 환경에 필요한 라이브러리를 설치 및 셋팅 해준다.

Create React App을 활용한 예제

SPA

전통적인 웹사이트의 경우, 위 컴포넌트와 같이 개별적인 컴포넌트를 불러오는 것이 아니라 웹 페이지 전체를 로딩했었다. 그러나 현재에서는 HTML 문서 전체가 아닌 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JS가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식으로 동작하는데 이를 Single Page Applicatioin, SPA라 한다.

장·단점

  • 장점
    • 필요한 부분의 데이터만 받기 때문에 사용자와 상호작용이 빠르다.
    • 데이터 통신 과정에서 전달되는 데이터가 비교적 적기 때문에 서버 과부하 문제가 줄어든다.
  • 단점
    • 브라우저가 첫 화면을 로딩할 때 HTML 파일을 읽고난 후, JS파일을 다시 받아오는 과정을 거치고 이 JS 파일은 용량이 크기 때문에 첫 화면 로딩 시간이 길다.
    • 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하기 때문에 검색 엔진 최적화(SEO)가 좋지 않다.

React Router

SPA는 하나의 페이지를 가지고 있지만 여러 종류의 화면을 사용한다. 이때 이 화면에 따라 웹페이지 주소 또한 달라지는데, 이렇게 다른 주소에 따라 다른 화면을 보여주는 과정을 “Routing” 이라고 한다.

그러나 React 자체에는 “Routing” 기능이 내장되어 있지 않기 때문에 React SPA에서는 “React Router”라는 라이브러리를 가장 많이 사용한다.

활용 : React Router 주요 컴포넌트

  • BrowserRouter : 라우터 역할
    • 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 한다.
    • BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트 사용이 가능하다.
  • Routes, Route : 경로를 매칭
    • Routes는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 랜더링 시켜주는 역할을 한다.
    • Routes를 사용하지 않으면 매칭되는 모든 요소를 랜더링 한다.
    • Route는 path와 element 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다.
    • 이때, 경로는 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.
  • Link : 경로를 연결
    • 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경한다.
    • HTML의 a태그와 달리 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.
  • 사용 예시
$ npm install react-router-dom

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import './App.css';

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

//  MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
             <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<MyPage />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
      </Routes>

      </div>
    </BrowserRouter>
  );
}

export default App;

React Route SPA 예제

본 포스팅은 코드스테이츠 BEB 과정을 수강하며 작성한 글입니다.

참고

The Merge

6 분 소요

The Merge