React란?

1.React란?

메타에서 개발한 JS 라이브러리이다.

2.React의 역할은?

 

React 사이트에서 라이브러리의 간략한 정의가 있습니다.

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

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

라고 쓰여 있습니다.

 

React 사이트의 정의를 이해하기 위해서는 사용자 인터페이스와 라이브러리를 알아야합니다.

 

① 사용자 인터페이스(User Interface)

사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어

 

웹을 예시로 들자면, 

 

버튼, 텍스트 입력창 등이 있습니다.

 

버튼을 눌러서 웹사이트에서 지정된 페이지를 보여주게 하기 때문에 그런 것이라고 할 수 있습니다.

 

②라이브러리란?

 

프로그래밍 언어에서는 자주 사용되는 기능들을 정리해 모아놓은 것이라고 볼 수 있습니다.

 

즉, 쉽게 말하면

 

라이브러리가 문자열 관련 기능, 숫자 관련 기능 등의 여러 기능을 라이브러리에 모아놓은 것이라고 볼 수 있습니다.

 

 

리엑트 사이트에서 리엑트 정의를 쉽게 풀이하면,

 

화면을 만들기 위한 기능을 모아놓은 라이브러리이며, 이런 기능을 지칭하는 용어가

 

UI 라이브러리

입니다.

 

UI 라이브러리의 예로는

 

①NGULARJS

NGULARJS의 출처: https://acaroom.net/ko/blog/youngdeok/angularjs%EC%9D%98-%EC%9D%B4%ED%95%B4

②React

react 마크 사진 출처 https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_%28%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%29

③Vue.js

Vue.js마크 사진 출처 : https://velog.io/@taese0ng/Vue.js-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95

대표적으로는 이 3가지가 있습니다.

 

다른 UI 라이브러리의 예로는 아래 사이트를 보시면 될 것 같습니다.

빠르게 멋진 랜딩페이지를 만드는 JS 라이브러리 – UI Design Guide

 

3. React를 쓰는 이유는?

규모가 있는 웹 사이트는 수백 개의 페이지가 존재 하는데, 이것을 각 페이지마다 HTML로 만들고 관리하는 것은 비효율적입니다.

 

이를 극복하기 위해서,

 

하나의 HTML 틀을 만든 후 특정 페이지를 요청할 때 그 안에 페이지의 내용을 넣는 것이 SPA입니다.

 

React는 SPA를 실행하기 위해서 쓴다고 생가하시면 됩니다.

 

SPA를 알기 위해서 MPA를 알아야합니다. 

SPA(Single Page Application)	MPA(Multiple Page Application)
모든 정적 리소스를 최초 한번에 다운로드 --> 새로운 페이지 요청이 있을 때 필요 데이터만 받아 갱신	새로운 페이지를 요청할 때마다 정적 리소스 다운로드 --> 매번 전체 페이지가 리렌더링됨

 

 

그리고 아래 주소는 react를 공부하면서 작성 한 코드들입니다.

GitHub - do04200611/react: https://do04200611.github.io/react/

 

참고 강의

[지금 무료] 처음 만난 리액트(React) 강의 - 인프런