⚛️ React란? React 입문하기!

SPA(Single Page Application)

• 전통적인 페이지에서는 변경이 필요할 때 서버에서 요청(Form Post)받으면 HTML을 클라에 전달하며 페이지를 처음부터 다시 불러오게 됨
• SPA는 데이터 전달을 서버로 데이터 전달을 AJAX 통신으로 하며, 변경이 필요한 부분만 JSON으로 전달하며 변경된 부분만 수정.

 

React의 기본

Compoent

React에서 서비스를 개발할 때 독립적인 단위로 쪼개어 구현, 후에 조립

 

Virtual DOM

가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념

뒤에서 미리 그려보고 바뀐 부분만 다시 그려줌

 

JSX

JS 내에서 HTML과 유사하게 UI 작성 쉽게 가능

 

React의 역사

• 페이스북은 성능이 좋은 동적 UI를 구축하는 과제에 직면, 개발 프로세스 최적화
• 2011년에 페이스북은 자바스크립트와 XHP 공생을 기반으로 React 라이브러리를 출시
• 2013년 오픈 소스화
• 현재 라이브러리들 중 가장 많은 사랑, 커뮤니티여러 기업체에서 React 사용 중

 

React의 장점

• 생산성 / 재사용성 : Virtual DOM, 컴포넌트, 단방향 데이터 흐름, hook
• 풍부한 자료 / 라이브러리 : 오픈 소스, 여러 개발 도구를 지원
• 다양한 사용처 (React-Native로 모바일에서도)

사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용

 

Create react app (CRA)

React 프로젝트를 손쉡게 생성할 수 있도록 도와주는 '보일러플레이트(Boilerplate)'

 

npx create-react-app first