본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

React가 뭔가요?

SPA(Single Page Application)

• 기존에는 클라이언트와 서버가 데이터를 주고받을 때 페이지가 리로드된다.
• SPA는 변경이 필요한 부분을 JSON으로 전달받아 변경된 부분만 리로드된다.

개요

• React
  • 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
  • 사용자 정의 태그를 만드는 기술이다.
• Component
  • React에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현
• Virtual DOM
  • 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
• JSX
  • JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML과 유사하다.

리엑트 랜더링 방식

• CSR
• 어떤 주소 요청 $\rarr$ 빈 html & js $\rarr$ 다운로드 된 js dom
• 화면 리로딩이 필요없다 $\rarr$ 사용성이 좋다.

성능

• 일반 js : 어떠한 요소의 변경 $\rarr$ 추가연산
• React : 가상 DOM을 생성(JS객체 형태) $\rarr$ 변경 전/ 변경 후 $\rarr$ Diffing $\rarr$ Batch Update

$\rarr$ DOM 요소를 제거, 교체하는 과정이 훨씬 빨라 사용성이 올라간다.
$\rarr$ 변경사항들을 한번에 처리함으로써 성능이 개선되었다.

왜 React를 배우면 좋나요?

• 생산성 / 재사용성
  • Component와 Hook을 활용, 작은 단위의, 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높인다.
    • JSX로 필요한 데이터를 한 공간에 삽입
• 풍부한 자료 / 라이브러리
  • 현재 React는 전 세계적으로 가장 활발하게 커뮤니티 활동이 이루어지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있다.
• 다양한 사용처
  • React 지식을 React-Native에 적용하여 안드로이드 앱 및 iOS 앱 등을 개발할 수 있다.

React의 특징

• HTML에 JS문법을 적을 수 있다.
• 컴포넌트
  • 하나의 '블록'을 만들어서 한 곳에 '조립'하여 개발
• State
  • useState를 이용하여 데이터를 유동적으로 관리

Create React App

• Create React App(CRA) 란?
  • React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 '보일러플레이트(Boilerplate)'
  • 프로젝트 생성에 필요한 다양한 기능을 Command로 제공한다.
• Create React App의 장점
  • 개발자가 온전히 React App 개발에 집중할 수 있도록 한다.
    • 상대적으로 덜 중요한 코드는 노출되지 않는다.
    • 강력한 Command 지원
  • (대부분의) 모든 브라우저에서 해설될 수 있도록 transcompile 지원
    • Babel
    • 배포 시 코드 번들링
    • Webpack

Node.js / NPM

• Node.js
  • HTTP 통신 관련 라이브러리 내장
  • NPM을 통해 방대한 라이브러리 제공
  • Create React App으로 프로젝트 생성 시 개발환경 및 테스트 서버로 이용된다.
• NPM
  • Node.js 환경에서 사용하는 각정 패키지들을 관리하는 저장소
  • 패키지 관리 뿐문 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공