React - (1)

React 란?

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. (출처 : 위키백과)

 

특징?

1. Data Flow : 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

2. Component 기반 구조 : React는 UI(View)를 여러 컴포넌트를 쪼개서 만든다 (Header, Footer같은 구조등)

3. Virtual DOM : 변경이 될때마다 매번 새롭게 그리는 것이 아닌, 변경된 지점만 최소한으로 업데이트 (효율성, 속도 향상)

4. JSX : Javascript를 확장한 문법 const element = <h1>Hello, world!</h1>; 도 JSX 문법

5. Props and State : 

• Props (외부에서 받은 변하지 않는 값)
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
• State (컴포넌트 내에서 바뀌는 값)
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적.     

 

프로젝트 시작하기

npx create-react-app projectName	// 새로운 리액트 프로젝트 시작
		
create-react-app	// 테스트용 React 앱 실행 (package.json 에서 "start"의 명령어로 표기되어 있음)

 

SPA

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다. (3번의 Virtual DOM)

 

단점으로는 검색 엔진 최적화가 좋지 않고, HTML 파일은 거의 비어있어서 JavaScript 파일이 무거워진다. 결국 첫 화면의 로딩 시간이 길어진다는 것. (자세한 내용을 위해 구글링을 추천한다.)

 

React Router

SPA는 하나의 페이지를 갖고 있지만, 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twitter와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라진다.

 

이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.

 

하지만 리액트내에는 이 기능이 내장되어 있지 않아서 우리가 직접 주소마다 다른 뷰를 보여줘야한다.

우선 라우터부터 설치해보자

 

npm install react-router-dom // React Router DOM 을 설치한다.

 

출처 : 코드스테이츠

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link.

 

사용하기 위해 import를 해줘야 한다.

 

import React from 'react'
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
// 필요한 네가지만 가져오기 위해 {~~~} 안에 넣어서 import 해준다.

// Home, Dashboard 컴포넌트를 만들어준다.
function Home() {
  return <h1>Home</h1>;
}



   <BrowserRouter>

	...

      <Routes>  // 주소경로와 위에서 만든 3개의 컴포넌트를 연결해준다.
          <Route path="/" element={<Home />} /> // 경로를 설정하고 컴포넌트를 연결한다.
          <Route path="/dashboard/*" element={<Dashboard />} /> // * 은 여러 라우팅을 매칭하고 싶을 때
       </Routes>
      </div>
   </BrowserRouter>
   
   // 그 뒤 ... 부분에서 Link로 연결
   
   <li>
      <Link to="/">Home</Link>Link // 컴포넌트를 이용하여 경로를 연결한다.
   </li>
   <li>
      <Link to="/dashboard">Dashboard</Link>
   </li>