React

React는 페이스북에서 만든 JavaScript 라이브러리다.

간혹 보면 프레임워크라는 블로그가 보이는데 공식문서 상에 라이브러리라고 명시되어있다.

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

- 프레임워크란 ?
   뼈대 골격 구조

- 라이브러리란 ?

   특정 기능에 대한 도구 또는 함수들의 집합입니다.

- 차이점 ? 

   라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다.

즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다. (출처 : https://webclub.tistory.com/458)

 

리액트는 왜 ? 개발이 되었을까

리액트는 MVC 패턴에서 V에 해당하는 View와 관련이 있다.

리액트는 View만 관리를 담당하여 기존에 DOM 을 직접 관리하는 부분에서 오는 불편함을 해소 시켜준다.

(이때 React에서는 Virtual DOM 이라는 가상돔을 이용하여 변경된 부분만 확인하여 DOM을 변경해준다. /
아래 출처 목록 참고)

 

React 특징

- Component 들로 이루어져 있다.

- Virtual DOM 을 통해 빠른 성능을 보여준다.

  - Vitual DOM ?  

    : 메모리상에 실제 돔을 복사해놓고 변경된 부분만을 실제 돔에 적용 (일부분만 렌더링)

- JSX 사용

  - Javascript를 사용하는 파일안에 HTML 문법을 사용

- SPA (Single Page Application)  

  : 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

  - React Router DOM 을 통해 화면 이동

 

 

자연스럽게 리액트를 공부하다보면 Vue와 비교가 되어지는데

Vue와 비교한 장단점은 아래 큰돌님의 영상이 좋은 거 같아서 공유한다.

실제 경험을 통해 공감하지는 못하지만 영상을 통해 간략하게 나마 인지한채로 공부하면 좋을 거 같다.

 

Youtube

 

 

출처 

: 블로그

: 벨로퍼트님 

: 큰돌님

: MVC 패턴 - 큰돌님 네이버 블로그

: 리액트의 탄생과 Flux 패턴