[3/30] 리액트란?

1. 리액트란?

SPA(Single Page Application)을 위한 UI를 구축하는데 사용되는 자바스크립트 라이브러리 중 하나

2. 리액트의 원리

화면에 표시되는 DOM과 동일한 Virtual DOM을 메모리상에 만들고 DOM조작이 발생하면 Virtual DOM에 모든 연산을 수행한 후, 이전에 저장된 Virtual DOM과 새로 생성된 Virtual DOM을 비교해 변경된 부분의 실제 DOM을 갱신하여 리플로우/리페인트의 연산을 최소화함

3. 리액트의 특징

1. 단방향 데이터 바인딩

• 위에서 아래방향으로만 흐르며 부모의 데이터를 바꿔주기 위해서는 state를 이용해야 함
• 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해줌

2. JSX

JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)이다

4. 선언형 프로그래밍

• (명령형 프로그래밍처럼) 과정에 집중하는 것이 아닌 결과물에만 집중함
• 더 가독성이 좋으며 예측이 쉽다.

5. 컴포넌트 기반

• 리액트로 웹 서비스를 개발할 때 컴포넌트를 사용하여 UI를 구성함.

4. 리액트의 장점

• Virtual DOM을 사용하기 때문에 업데이트와 렌더링 속도가 빠름
• 컴포넌트 기반이기 때문에 유지보수가 쉽고, 재사용성이 용이함
• 라이브러리이기 때문에 다른 프레임워크와 혼용 가능
• SSR, CSR지원으로 초기 렌더링 딜레이를 줄임

5. 리액트의 단점

• IE8 이하 버전은 지원하지 않음
• View 만을 관리하여 그 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 함
• SEO에 어려움이 있어 검색엔진에 검색이 잘 안됨