React_Intro

React는 Front-End 개발을 위한 JavaScript 오픈소스 라이브러리이다.

React의 3가지 특징

1. 선언형

HTML과 JS에 나눠서 적기 보다는 JSX에 명시적으로 작성한 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반 (Component-Based)

하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중 개발 가능하다.

3. 범용성 (다양한 활용성)

JavaScript 프로젝트 어디에든 유연하게 적용 가능
React-Native로 모바일 개발도 가능

JSX

• JSX는 JavaScript XML의 줄임말로 React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법

• Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링한다.

• JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치

• JSX는 javaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한 눈에 확인 가능

JSX 문법

1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.

<React.Fragment>
  <h1>Hello</h1>
  <h2>World</h2>
</React.Fragment>

2. React에서 CSS class 속성을 지정하려면 "className"으로 표기 (camelCase)

<div className='hi'>Hello</div>

3. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 사용

const App = () => {
  const name = 'Hoony';
  return (
      <div>
      Hello, {name}
      </div>
    );
}

4. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작 (PascalCase)

const Header = () => <header>Hello, World</header>;
  
const App = () => {
    return (
      	<Header/>
      	<Main/>
      	<Footer/>
      );

대문자로 작성된 JSX 컴포넌트는 사용자 정의 컴포넌트

5. 조건부 렌더링은 if문이 아닌 삼항연산자를 사용

	<div>
  		{ Array.isArray(arr) ? <p>배열</p> : <p>객체</p> }
  	<div>

6. React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용

const tweets = [
  {id: 1, username: 'Hoony', content: 'Hi, World'},
  {id: 2, username: 'Hoody', content: 'Hello, World'}, ...
  ];
  
const Twitter = () => { 
  const tweetsMapper = tweets.map(tweet => {
    return (
  		<div key={tweet.id}>
        	<span>{tweet.username}</span>
        	<p>{tweet.content}</p>
        <div>
      );         
  });
  return tweetsMapper;
};      

map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다. React_key 참조

Component

• 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음이며 UI를 구성하는 필수 요소이다.

• 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 앱을 만들 수 있다.

• 모든 리액트 앱은 최소 한개의 컴포넌트가 있고 컴포넌트의 최상위 부모인 root가 있고 여러 자식 컴포넌트 트리구조이다.

• 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로는 복잡한 앱을 만들 수 있다.

Create React App

리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

npx create-react-app [폴더명/프로젝트명]

SPA (Single Page Application)

• JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식

• 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

SPA로 개발할 때 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고 받을 수 있도록 와이어프레임을 설계해야 한다.

장점

1. 필요한 부분만 업데이트하기 때문에 SPA는 유저의 행동에 빠르게 반응

2. 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제 최소화

3. 화면 전체를 새로 렌더링 할 필요가 없기 때문에 보다 나은 유저 경험을 제공

단점

1. HTML 내용이 적고 거의 다 JS에 있기 때문에 양이 많아 JS 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어짐

2. HTML에 별다른 자료가 없어서 검색 엔진 최적화가 좋지않음 그러나 SPA도 검색 엔진이 발전중

Router

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

npm install react-router-dom

React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용

React Router 주요 컴포넌트

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link

import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 사용

1. BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할

2. Switch 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할

3. Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정함

4. Link는 경로를 연결해주는 역할을 하는 컴포넌트
   Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장 되어있기 때문에 SPA를 구현