7월11일(일) React 복습

남이섬·2021년 7월 11일

TIL

React 란?

프론트 앤드 개발을 위한 Javascript 오픈 소스 라이브러리
선언형, 컴포넌트기반, 다양한 곳에서 활용(범용성)/라이브러리

Achievement Goals 기준으로 정리

Achievement Goals

React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

React의 3가지 특징 : 선언형, 컴포넌트 기반, 법용성/라이브러리

1. 선언형 (Declarative)
React는 한 페이지를 보여주기 위해 HTML/CSS/JavaScript로 나눠적기 보다는 하나의 파일에 명시적으로 작성 할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식

JSX는 HTML + Javascript를 결합한 문법 기반으로 명시적으로 코드를 작성하여 직관적으로 짤 수 있다. 다른 기술을 한 곳에 모아 볼 수 있어서 개발자가 코드를 보고 실제 웹어플리케이션 모습과 기능을 쉽게 상상 할 수 있다.

2. 컴포넌트 기반 (Component-Base)
React는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어 놓은 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용도 가능 하기 때문에 기능 자체에 집중하여 개발할 수 있다.

3. 범용성 (Learn Once, Write Anywhere)
React는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
페이스북에서 관리되어 안정적이고, 요새 많이 사용되고 있으며, 리엑트 네이티브로 모바일 개발도 가능하다.

JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.

JSX란 ?
1. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.
2. JSX를 통하여 React문법을 만들 수 있다.
3. JSX는 JavaScript가 확장된 문법이지만 Browser가 바로 실행 할 수 있는 JavaScript 코드가 아니기 때문에 Browser가 읽을 수 있는 JavaScript 코드로 변화을 해주어야 한다.(Babel을 이용하여 JSX를 Browser가 이애할 수 있는 JavaScript로 컴파일 한다)

JSX를 왜 써야 할까 ?
1. React에서는 JSX를 이용해서 앞서 보았던 DOM 코드 보다 명시적으로 코드를 작성 할 수있다.
2. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 할 수 있다.
구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고한다.

React는 JSX를 사용하지 않아도 React 요소를 만들어 사용할 수 있다.
하지만 코드가 복잡해지고 가독성이 떨어져 JSX를 사용하는 것을 추천한다.

JSX의 활용

규칙 1
하나의 엘리먼트 안에 모든 엘리먼트가 포함 되어야 한다.

<div>  // <opening tag> 전체를 감싸준다.
    <div>
    	<h1>JSX<</h1>
    </div>
    <div>
    	<h2>활용</h2>
    </div>
</div> // <closing tag> 전체를 감싸준다.

규칙 2
React에서 CSS class 속성을 지정하려면 "className"으로 표기 해야한다.
만약 class로 지정하게 되면 React에서는 HTML 클래스 속성 대신 JavaScript 클래스로 받아 들인다.

<div className="header"></div> // className으로 지정

규칙 3
JSX에서 JavaScript를 쓰려면 중괄효 {} 를 이용해야 한다.
만약 중괄호를 사용하지 않으면 일반 text로 인식한다.

규칙 4
React 엘리먼트가 JSX로 작성 되면 대문자로 시작해야한다.
만약 소문자로 시작하게 되면 일반 적인 HTML 엘리먼트로 인식 하게 된다.

대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

function Hello() {
	return <div>Hello!</div>;
}
function HelloWorld() {   //사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)
	return <Hello />;
}

규칙 5
조건부 랜더링에는 삼항연산자 사용

<div>
  {
    (1+1 === 2) ? (<p>정답</P>) : (<P>탈락</P>)
  }
</div>

규칙 6
여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용
(내생각엔 꼭 map()함수를 사용해야 하는건 아닌거 같은데 map() 함수를 쓰면 쉽게 추가 할 수 있어서 추천 하는 거 같다.)

ex)

    {id: 1, title: Titanic, director: James Cameron},
    {id: 2, title: Once, director: John Carney}
];
function information() {
  const content = movies.map( function (movie) {
    <div key={movie.id}>
      <h3>{movie.title}</h3>
      <p>{movie.content}</p>
    </div>
  });
  return (
    <div>
      {content}
    </div>
 );
};

React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

컴포넌트(React Component) 란 ?
1.하나의 기능 구현을 위한 여러 종류의 코드 묶음
2. UI를 구성하는 필수 요소

ex)

const Component = function () {
  return (
    <>
      <div>(1번)</div>
      <div>(2번)</div>
    </>
  )};

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

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

각각의 컴포넌트는 각자 고유의 기능으 ㄹ가지고 있으며 UI의 한 부분을 담고있다.
이러한 컴포넌트들을 한데 모아 복잡한 UI를 구성 할 수 있고, 더 나아가 최종적으로는 복잡한 어플리케이션도 만들 수 있다.

각 컴포넌트들은 각각 담당 하는 곳이 정해져 있어 UI의 수정을 할때 매우 쉽게 수정할 수 있다.

Achievement Goals

SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.

SPA(Single-Page Application) 이란 ?
서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트

SPA 등장 배경
기존엔 브라우저가 페이지를 보여주기 위해선 HTML파일로 된 페이지 전체를 불러와야 했다.
점차 웹사이트가 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스사이에 더욱 많은 상호 작용이 일어나게 되면서 불필요한 트래픽이 발생하게 되었다.
(매번 모든 페이지를 불러오는 거에 따라 느린 반응성을 갖이게 되고 애플리케이션과 같은 사용자 경험을 제공 하기엔 어려움이 있다.)

1990년대 이후
HTML 문서 전체가 아닌 업데이트에 필요한 데이터만 서버에 전달 받아 이 데이터를 JavaScript의 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되기 시작

2000년대 중반부터 이러한 개발 방식을 이용한 웹 어플리케이션이 보편화 되기 시작했으며,
이것이 즉 SPA 이다.

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

SPA의 장, 단점에 대해 이해하고 설명할 수 있다.

SPA 장점
애플리케이션과 사용자 사이에 수시로 방호작용이 발생 했을때, 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다.

서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과부하 문제도 현저히 줄일 수 있다.

화면 전제를 새로 랜더링 할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다.

즉,

SPA 장점은
1. 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자의 Interaction에 빠르게 반응한다.
2. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
3. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

SPA 단점

첫번째

브라우저는 첫 화면 로딩 시에 HTML파일을 읽어들인 후 그 안의 script tag안에 있는 JavaScript파일을 다시 받아오는 과정을 거친다.
이때 첫 화면 로딩 시 읽어들인 HTML파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일안에 들어있다보니 JavaScript 파일이 무거워 진다.
때문에 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.

즉,
SPA는 HTML파일은 거의 비여있고 JavaScript를 이용하여 동적으로 HTML 요소를 생상하는 방식으로 JavaScript로 모든일은 한다 해도 과언이아니다.
그러므로 JavaScript 파일의 크기가 커서 JavaScript 파일을 기다리는 시간으로 첫 화면 로딩 시간이 길어진다.

두번째

검색 엔진 최적화가 좋지 않다

검색엔진 작동 방식은 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있는 인덱스에서 검색어와 가장 연관성이 높은 웹페이지들을 순서대로 보여주는 방식으로 작동한다.
검색 로봇은 자료를 수집 할 때 웹페이지의 URL은 물론이고 HTML 문서내의 각종 태그나 링크 등을 분석한다.

SPA는 HTML이 거의 비어있어서 검색 로봇이 충분한 자료를 수집하지 못한다.

즉,
검색 엔진 최적화(SEO)가 좋지 않다. 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색엔진이 적절히 동작 하지 못한다.

하지만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세이다.

와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다.

wire : 선
Frame : 윤곽선

Wireframe
웹페이지의 레이아웃과 UI요소 등에 대한 뼈대이다.(선을 이요해 윤곽선을 잡는 것)

Mockup
데모 시연, 평가를 위한 최소한의 기능만 담은 모형이다.(데스크톱, 스마트폰의 프레임을 덧 씌워 직관적으로 이해햐기 쉽게 디자인 한 것)

라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

React-Router-DOM

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

React Router의 주요 컴포넌트

<BrowserRowter> // Router의 역할을 한다.
<Switch> // 경로를 매칭해준다. Router 태그를 감싸주는 역할
<Route> // 경로를 매칭해준다.
<Link> // 경로를 변경한다.

Switch 컴포넌트
1. 여러 Router컴포넌트를 감싸서 그 중 경로가 일치 하는 단 하나의 Router만 랜더링 시켜주는 역할을 한다.
2. Switch를 사용하지 않으면 매칭되는 모든 요소를 랜더링한다.

Router 컴포넌트
1. Path 속성을 지정하여 해당 Path에 어떤 컴포넌트를 보여줄지 정한다.
2. 첫 Router 컴포넌트의 Path를 지정할때는 exact를 써줘야한다.
(메인화면 경로는 다른 라우트 컴포넌트 Path에도 지정되기때문에 exact를 꼭 지정해줘야 다른 페이지로 넘어 갈 수있다. 만약 지정하지 않으면 다른 페이지로 넘어가지 않고 처음에 지정된 경로만 보여주게 된다.)
3. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.

Link 컴포넌트
1. 경로를 연결해주는 역할을 하는 컴포넌트
2. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 history API를 이용하여 페이지의 주소만 병경을 해준다.

import
필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용 할 수있다.

번외

a 태그가 아닌 Link 태그를 사용하는 이유
a 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 랜더링 한다(새로고침)

Link 컴포넌트는 페이지를 전환 방지하는 기능이 내장되어 있어서 SPA를 구현 할 수있다.

React 복슴 중 좀 더 완벽하게 이해를 하고자 세세하게 적으면 복습을 해보았다.
노트에 펜으로 정리 후 text파일에 Achievement Goals 기준으로 정리 후 이렇게 블로그로 좀 더 상세히 적어보니 이제 좀 React를 알꺼같다.
DOM으로 HTML 조작하는걸 배운지 얼마 안돼 이해하기에 좀 난감 했는데 어느정도 이해하고 나니 React를 능숙하게 쓰게 된다면 DOM으로 조작하는 것 보다. 참 편하게 코딩을 할 수 있을 꺼 같다라는 생각이 든다. 능숙하게 다루기 위해 더 힘내 보자