1. React란 무엇인가?

페이스북에서 제공하는 자바스크립트 UI 라이브러리.

간단히 설명하면 Angular는 프레임워크이고 React는 라이브러리이다.

프레임워크 : 프로그램 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공

라이브러리 : 소프트웨어를 개발하기 쉽게 기능을 제공하는 도구 프레임워크는 정해진 룰을 지키면서 만들며, 라이브러리는 도구이기에 자유도가 다르다.

※ DOM(Document Object Model) HTML, XML, CSS등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리

React는 이벤트로 인해 데이터로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성하며 이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트한다.

SPA(Single Page Application) 최초 한번만 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 말합니다.

SPA에서는 DOM 조작이 많이 되며, 그 때마다 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적으로 되기 쉽습니다. 하지만 Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달합니다.

이로 인해, 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선되고 렌더링도 되지 않기 때문에 연산 비용이 적습니다.

Flux 패턴 페이스북에서 Flux라고 부르는 패턴은 단방향 바인딩이다.

Component 기반 구조

React는 UI(혹은 View)를 여러 컴포넌트(Component)로 나누어서 만듭니다.

한 페이지 안에서 Header Body Footer등 각 부분을 독립된 컴포넌트로 나누어 만들고 필요에 따라 컴포넌트들을 조립해 화면을 구성합니다.

여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 불러와서 사용하면 되므로 코드의 유지보수가 용이합니다.