React

React는 프론트앤드 개발을 위한 JS 오픈소스 라이브러리이다.

1. React의 3가지 특징

• 선언형

• 컴포넌트 기반

• 범용성

선언형

React는 한 페이지를 보여주기 위해 JSX를 사용한 선언형 프로그래밍이다.

선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어주는 장점이 있다.

컴포넌트 기반

React는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.

컴포넌트로 분리하여 개발하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있는 장점이 있다.

범용성

React는 JS 프로젝트 어디에든 유연하게 적용될 수 있다.

2. JSX(JavaScript XML)

React에서 UI를 구성할 때 사요하는 문법으로 JS를 확장한 문법이다.

JSX 문법

JSX에서 JS와 다르게 사용하는 문법으로 반드시 알아두어야 한다.

• class는 className으로 입력한다.
• JS변수를 사용하려면 중괄호({})를 이용해서 사용한다.
• React 엘리먼트가 JSX로 작성되면 대문자로 시작해서 HTML 엘리먼트와 구별지어야 한다.
• 조건부 렌더링은 If문이 아닌 삼항연산자를 사용한다.

3. SPA(Single Page Application)

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.

SPA의 장점

• 사용자와의 상호작용이 빠르다.
• 서버 과부하 문제가 줄어든다.

SPA의 단점

• JS 파일의 크기가 크기 때문에 첫 화면 로딩 시간이 길어진다.

4. 데이터 흐름

React는 단방향 데이터 흐름(one-way data flow)이며 데이터 흐름은 하향식이다.