47 :: SPA, React, CRA, JSX, Component

엘리스 SW 엔지니어 트랙 47일차

온라인 강의날

SPA(Single Page Application)

최초에 서버로부터 HTML 전달받고

페이지 변경이 필요할 때 필요한 부분 JSON 같은걸로 전달 받음

=> 변경된 부분만 다시 그린다

 

리액트 이용시 SPA 간단히 사용가능

 

 

React(리액트)

사용자 인터페이스 만들기 위한

자바스크립트 라이브러리

사내 소프트웨어 사용하기 위해 개발됐다

 

Component

레고 블럭처럼 독립적인 단위로 쪼개서 구현

 

Virtual DOM

리액트가 가상 돔을 그리고

실제 돔이랑 다른 부분을 다시 그리는(동기화) 해준다

 

JSX

JavaScript 내에서 HTML 같은 녀석을 사용할 수 있도록 해주는 것

 

 

Why React?

생산성 / 재사용성

Component와 Hook 활용

개발자 생산성과 코드 재사용성 높인다

 

풍부한 자료

인기 많다

셀 수 없을 만큼 방대한 자료와 라이브러리 있다

(Fluent UI, Redux, Material, Ant Design 등)

 

다양한 사용처

React로 웹 앱이 아닌,

React-Native에서 안드로이드 iOS 앱도 개발 가능

 

 

React 등장 배경 생각해보자

JavaScript/jQuery 사용에서 뭔가 개선을 위해

React가 나왔겠지?

 

 

React의 특징

Component

리액트 개발의 가장 작은 단위

 

State

컴포넌트 내에서 바뀌는 값은 State로 관리

변경될 때마다 컴포넌트가 다시 렌더링

 

 

React 프로젝트 생성

jQuery 추가처럼 React도 script를 추가해서 사용해도 된다

=> 다만 관련된 셋팅을 다 직접 해야된다

 

 

CRA(Create React App)

Boilderplate(보일러플레이트) 중 하나

프로젝트 쉽게 생성하도록 도와준다

페이스북에서 만들어서 가장 많이 이용

 

 

CRA 장점

1. 개발자가 온전히 React App개발 집중

덜 중요한 코드는 노출 X

강력한 커맨드 지원

 

2. 거의 모든 브라우저를 위한 transcompile 지원

Babel

Webpack(배포시 코드 번들링)

등

 

 

Node.js / NPM 소개

CRA로 React 프로젝트 사용하기 위해

Node.js 깔아야된다

https://nodejs.org/en/

LTS 버전 다운로드

 

 

리액트 개발은 99.9%

다른 라이브러리를 함께 사용한다고 한다

npm으로 설치하고

import해서 사용한다

import "패키지명"
import something from "패키지명"
import { a, b } from "패키지명"

 

CSS 불러올 때

import "./App.css";

 

 

JSX

JavaScript함수 내에서

HTML과 비슷하게 생긴 녀석 

 

Babel은

JSX코드를 JavaScript로 Transcompile 한다

 

HTML과 차이점 몇 가지

• HTML태그 안에서 JavaScript 연산
• class => className
• 스타일은 object로 (중괄호 {} 이용)
  (https://www.w3schools.com/react/react_css.asp)
• 닫는 태그 필수 (img, br, input 등)
• 최상단 element는 반드시 한

최상단 div 태그로 감싸거나,

fragment 사용하자

// React fragment
const App = () => {
  return (
    <React.Fragment>
      <div>Hello</div>
      <div>World</div>
    </React.Fragment>
  )
}

// React.Fragment 생략 가능 => 그냥 <> 랑 </>

React fragment 링크=> https://reactjs.org/docs/fragments.html

 

 

Component(컴포넌트)

• React 페이지 구성하는 최소 단위
• Component 이름은 대문자로 시작
• Class Component와 Function Component로 나뉜다
• Controlled Component와 Uncontrolled Component

 

Class Component와 Function Component

초기 React는 모두 Class Component

v16부터 Function Component와 Hooks 개념 발표

현재는 Function Component가 주로 사용

 

 

Component 데이터 관리

컴포넌트끼리 데이터 주고 받을 땐 => Props

컴포넌트 내에서 데이터 관리 => State

데이터는 부모에서 자식으로만 전달