[React] 리액트란

 

리액트란?

 

프론트엔드 라이브러리, 프레임워크

 

단순히 웹 페이지가 아니라 웹 애플리케이션입니다.

브라우저 상으로도 자연스러운 흐름으로 매우 많은 것을 할 수 있습니다.

어떤 인터페이스를 동적으로 움직이게 하려면 수많은 상태를 관리해주어야 합니다.

 

<div>
	<h1>Counter</h1>
    <h1 id="counter">0</h2>
    <button id="increase">+</button>
</div>

버튼을 눌러서 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스

 

프로젝트가 규모가 커지고, 정말 다양한 유저 인터페이스와 인터렉션을 제공한다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는 건 힘들어집니다.

컨벤션을 가지고, 여러 규칙을 세워서 진행한다면, 불가능한 일은 아니지만 번거롭다는 단점이 생깁니다.

 

웹 개발 시, DOM 관리와 상태 값 업데이트 관리를 최소화하고, 오직 기능 개발, 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 라이브러리 혹은 프레임워크가 만들어졌습니다.

 

React, Vue, Angular

Angular: UI를 구현하게 됨녀서, 앵귤러 만의 문법 같은 것들이 다양하게 존재합니다. 특정 기능을 구현할 때, 편리하게 대신해주는 것이 많습니다. 라우터, HTTP 클라이언트 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 타입 스크립트를 함께 사용합니다.

 

React: '컴포넌트'라는 개념에 집중되어 있는 라이브러리 입니다. 컴포넌트는 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다.

HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들이 내장되어 있지 않습니다. 개발자가 원하는 스택을 맘대로 골라서 사용할 수 있습니다.

 

Vue: webpack 같은 모듈 번들러 사용하여 프로젝트를 구성해야 하는 앵귤러와 리액트와는 달리, 단순히 CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와서 사용하기 편합니다. 공식 라우터, 상태 관리 라이브러리가 존재합니다.

 

 

 

데이터가 바뀌면 그냥 View(뷰)를 날려버리고 새로 만들어버리면 어떨까?

DOM 기반으로 작동하는 이 페이지는 그떄 그때 새로 뷰를 만들어 버리면, 성능적으로 엄청난 문제가 있을 것이다.

해결방안! 가상돔!! virtual DOM

virtual DOM은 가상의 DOM이며, 변화가 일어나면, 실제로 브라우저의  DOM에 새로운 걸 넣는 게 아니라 자바스크립트로 이뤄진 가상 DOM에 한 번 렌더링을 하고, 기존의 DOM과 비교한 다음에 정말 변화가 필요한 곳에만 업데이트해줍니다.

 

webpack, babel 용도

컴포넌트를 여러 가지 파일로 분리해서 저장할 것이고, 컴포넌트는 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 됩니다.

여러 가지의 파일을 한 개로 결합하기 위해서 우리는 webpack JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서  Babel을 사용합니다.

 

Node.js: webpack과 babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어졌습니다.

yarn:  yarn은 조금 개선된 버전의 npm

npm은  Node.js를 설치할 때 같이 딸려오는 패키지 매니저 도구 yarn을 사용하는 이유: 더 나은 속도, 더 나은 캐싱 시스템

 

리액트 시작하기

import: 무엇을 불러온다는 것. webpack을 사용하기에 가능한 작업.

불러오면 나중에 프로젝트를 빌드하게 됐을 때, webpack에서 파일의 확장자에 따라 다른 작업을 하게 됩니다.

import React, { Component } from 'react';

...
...

export default App;

 

export: 우리가 작성한 컴포넌트를 다른 곳에서 불러와서 사용할 수 있도록 내보내기를 해줍니다.

 

컴포넌트를 만드는 두 가지 방법

1. 클래스 컴포넌트

class App extends Component { ... }

클래스 컴포넌트는 render 함수가 꼭 있어야 하며, 그 내부에서는 JSX를 return 해주어야 합니다.

 

2. 함수형 컴포넌트

 

 

TIP!
var 키워드와 const(let) 키워드의 차이점은 작동방식에 있어서 Scope가 다릅니다.
var : 함수 레벨 스코프  /  let, const : 블록 레벨 스코프

 

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때 보통 삼항 연산자, AND연산자 사용합니다.

if는 사용할 수 없습니다.