개요
React는 FaceBook에서 제공하는 웹 프론트엔드 라이브러리이고
좀더 깊게 들어가면 Node.js기반의 JavaScript 프레임워크이다.
JavaScript에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과
단방향 데이터 바인딩(One-Way Data Binding)을 사용하고있으며
싱글 페이지 애플리케이션(SPA)를 만드는데 효율적이다.
React의 특징으론 크게 5가지를 구분지을 수 있다.
- Component 기반
- One-Way Data Binding
- Virtual DOM
- Props and State
- JSX
Component기반
React는 여러 컴포넌트들의 조합으로 만든다.
즉 사용자는 하나의 페이지가 통째로 존재하는것 같지만 실제로는 각 부분을 독립된 컴포는트로 만들고
컴포넌트들을 조합해 화면을 만드는 방식이다.
컴포넌트단위로 쪼개져있기 때문에 파악하기가 쉽고, 재사용성이 높다.
One-Way Data Binding
React는 데이터 흐름이 단방향으로 가지기 때문에 대규모 애플리케이션의 경우
Augular.js와 같이 양방향 데이터 바인딩 보다 데이터의 흐름을 예측하기 쉽다.
Virtual DOM
DOM은 HTML, XML, CSS 등을 트리구조로 인식하고 데이터를 객체로 간주하고 관리한다.
React는 DOM과 같은 구조체를 Virtual DOM으로 가지고 있다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴때마다 Real DOM과 차이를 계산하여
변경이 필요한 부분만 Real DOM에 반영해 앱의 속도를 개선할 수있다.
props & state
props이란 부모컴포넌트에서 자식컴포넌트로 전달해주는 데이터를 말한다.(메소드의 매개변수같은 느낌인가?)
전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
state는 컴포는트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
state는 동적인 데이터를 다룰 때 사용하며 state를 좀더 잘 관리하기 위해
상태관리 라이브러리인 redux 등을 사용하기도 한다.
JSX
JavaScript에서 HTML를 사용할수 있다.
필수는 아니여서 이런 개념이 있다라는것만 파악하고 후에 사용할 기회가 온다면 다시 정리해보자
const element = <h1>Hello, World</h1>;위와 같이 JavaScript 변수안에 HTML TAG를 넣을 수 있다.
