React란?

React란?
- 사용자 인터페이스를 만들기 위한
Javascript 라이브러리

 

왜 React를 배워야 하는가?

- 트렌드다

- 편하다 -> SPA

 

어떻게 트렌드가 될 수 있었는가?

[전통적인 웹 서비스 방식]

- 브라우저는 웹서버에 A페이지와 관련된 리소스를 다운 받음 -> 링크를 통해 B페이지로 가면 -> 또다시 페이지 요청

- 서버에서 html를 만들고 내려줌.

- A->B 페이지 전환 시, 새로고침 됨.

[SPA 방식]

- Single Page Application

- 자바스크립트를 통해 현재 페이지에 html를 생성하는 방식.

- 서버에서 미리 a,b 리소스를 모두 받고, 브라우저에서 동적으로 화면을 그림.

- 자바스크립트에 의해 화면의 콘텐츠만 바뀌는 것 (<--> 새로고침)

- SPA 방식의 프레임워크/라이브러리: React, Vue, Angular 가 있음.

    - Angular(2010) -> React(2013) -> Angular2, Vue(2016)

 

React의 특징
- 컴포넌트 기반의 설계
- Virtual DOM
- CSR

React의 특징

1) 컴포넌트 기반의 설계

- 스스로 상태를 관리하는 캡슐화된 코드 조각

- 의미 단위로 컴포넌트를 구성

- 재사용성과 유지보수성 증가

- 부모, 자식 관계를 가짐.

2) Virtual DOM

- 실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용됨.

- javascript로 html을 동적으로 변경시킬 때, 브라우저가 DOM을 다시 재구축하고 화면을 그리게 되는 과정을 거침. (좀 느려서 잦은 DOM 변경은 웹서비스의 성능 문제 야기)

- 가상돔에서 미리 변경시켜놓고, 이것을 DOM에서 동기화시킴.

3) CSR

- client side rendering : 브라우저에서 화면을 렌더링함.

 

 

 

실무 중심! FE 입문자를 위한 React 강의 | 인프런 - 인프런