수업 46일차
이주간 길었던 프로젝트르 끝내고 이번주 부터 다시 수업을 시작하였다. 프론트의 꽃 React를 드디어 시작한다~!
내용
- React: 페이스북에서 개발한 UI자바스크립트 라이브러리
CRA: React 팀에서 공식적으로 지원하는 보일러플레이트
JSX: Javascript의 확장 문법, 공식적인 문법 아님(React용)
JSX 규칙 : 1. 최상단은 단 1개의 태그로 이루어져야 함,
2. HTML 태그 안에서는 {}으로 감싸서 javascript를 사용할 수 있음,
3. 태그내에서는if문은사용할수없어서 삼항 연산자를 사용,
4. 태그에서 사용되는 표기는 대부분 카멜 표기법으로 사용함
5. style은 Object로 적용해야 함
React내 Compoment: 페이지를 구성하는 최소의 단위
Props: 부모로부터 전달 받는 값, 일기전용 데이터
State: 내부에서 상태를 저장하는 값
Reconciliation: 필요한부분만 갱신하도로 설계됨, 내부적으로 재조정하는 로직이 있음
Virtual DOM: 메모리에 실제 DOM과 거의 동일한 가상의 DOM을 생성해 둠
비교 알고리즘: 비교의 시작은 루트 부터, 자식에 대해서 재귀적 처리
React
기존의 JS Framework
이전의 JS는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순 스크립트 언어에 불과
현재의 JS는 웹 어플리케이션 뿐만 아니라 서버사이드, 모바일, 데스크탑 어플리케이션에서도 활약
순수 JS만으로 대규모 어플리케이션의 프론트엔드 사이드를 관리하려면 골치아픔
수많은 Framework가 생겨남; 주로 MVC, MVVM, MVW 등의 구조를 가지며 공통적으로 Model과 View가 존재(Model은 데이터 관리 영역, View는 사용자에게 보여지는 부분)
리액트
페이스북 개발팀에서 복잡성을 줄이기 위해 '데이터가 변할 때마다 기존의 뷰를 날리고 새로 렌더링하자'는 아이디어로 시작
어플리케이션 구조가 간단해지고 작성해야할 코드의 양이 줄어듬 / CPU 점유율이 크게 증가하고 데이터 변할 때마다 새로운 렌더링이 발생해 끊김 현상 동반
최대한 성능을 아끼고 편안한 사용자 경험을 제공하며 구현해보자
+) React 자체는 framework의 기준인 라우팅, 상태관리 기본 제공을 충족하지 못해 라이브러리이지만, React의 생태계는 framework이다.
특징
선언적(Declarative)
: 대화형 UI를 작성하기에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행
컴포넌트 기반(Component-based)
: 캡슐화된 컴포넌트가 스스로 상태를 관리, 복잡한 UI도 효과적으로 구성 가능
한 번 배워서 어디에서나 사용(Learn Once, Write Anywhere)
: 기존 소스를 다시 작성하지 않고 새 기능을 개발할 수 있음, Node 서버에서 렌더링 할 수도 있고 온라인 웹에서도 사용 가능, React Native로 모바일 앱 개발 가능
작동원리
DOM(Document Object Model)
HTML, XML 문서의 프로그래밍 interface
문서 구조를 트리 형태의 객체로 표현해, 그저 텍스트 파일이던 문서에 프로그래밍 언어가 접근할 수 있도록 함
DOM은 동적 UI에 최적화되어있지 않음 -> 작업의 결과물을 동일하게 유지하되 변경되는 DOM을 최소한으로 만들기 위한 방법 필요
Virtual DOM
실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JS 객체를 구성하여 사용
즉 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작하지 않고 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성해 이전의 것과 비교해 변경된 부분의 DOM만을 변경 -> '조화 과정(reconciliation)'
단방향 데이터 흐름(Flux)
장단점
장점 :
CSR(Client Side Rendering), SSR(Server Side Rendering) 둘 다 지원
프론트엔드 사이드에서도 객체 지향적으로 코드 구현 가능
React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 학습이 쉬움
Controller, directive, template, model, view 처럼 로직을 분리하지 않고, Component 하나로 관리 (이게 view 역할을 담당)
성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능 지원
UI 수정, 재사용성, 코드 가독성 향상
다른 framework나 library와 병행하여 사용 가능
단점 :
IE8 이하 버전 지원하지 않음
view 이외 기능은 직접 구현하거나 library 사용해야하므로 JS 배경지식 필수
데이터 모델링, 라우팅, Ajax 등의 기능 지원 안됨
로딩시간 길다(치명적!)
웹의 궁극적 지향점과 동떨어짐
웹의 핵심: 모든 것을 streaming하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징
리액트: 사이트에 필요한 JS를 처음에는 공백페이지만 띄우며 다운로드하고, 한 번 다운로드 한 이후에는 다시 다운로드 하지 않아도 됨; 처음 보이는 것이 없다(streaming과의 차이)
CRA(Create-React-App)
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
CRA 설치
// 작업할 폴더에서
$ npx create-react-app westagram-react
$ cd westagram-react
$ npm startCRA 파일 구성
node.modules - package.json - .gitignore
node.modules :
CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
package.json :
CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
"dependencies"
- 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
- 실제 코드는 node.modules 폴더에 존재
.gitignore :
github에 올리고 싶지 않은 폴더와 파일을 작성
index.html - index.js - app.js
public - index.html :
<div id="root"></div>src - index.js :
React의 시작 (Entry Point)
src - App.js :
현재 화면에 보여지고 있는 초기 컴포넌트
Westagram 작업 시 컴포넌트,
컴포넌트를 그 자리에 대체하여 작업하면 된다.
