리액트는 무엇인가? [처음 만난 리액트 #5]

1강. 리액트 소개 

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

---

리액트는 무엇인가?

 

React 공식 웹사이트

 

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

 

라이브러리란?

프로그래밍 언어에서의 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것 

 

프로그래밍에서 라이브러리를 도서관 책장에 비유한 그림

 

사용자 인터페이스(User Interface, UI)란?

사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것 

ex) 웹사이트에서의 버튼, 텍스트 입력창 등

버튼을 누름으로써 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여줌으로써 사용자들이 반응하는 것

 

UI 라이브러리

사용자 인터페이스를 만들기 위한 기능 모음집

* 리액트는 대표적인 JavaScript UI 라이브러리 (화면을 만들기 위한 기능을 모아놓은 것) 

 

웹사이트를 구축할 때 사용하는 대표적인 JavaScript UI 라이브러리

 

 

● AngularJS: 구글에서 만든 오픈소스 프로젝트로, JavaScript 기반의 웹 개발 프레임워크

리액트보다 훨씬 앞선 2010년에 처음 출시되었고, 불과 5~6년 전까지만 해도 굉장히 많은 곳에서 사용

2018년에 롱텀서포트라고 불리는 단기간에 버전 업데이트를 하지 않고 안정적인 버전을 장기간 유지하는 방식인 LTS 모드에 돌입하였고, 그러다 2022년 1월 LTS마저 중단을 선언하고 사실상 공식적인 지원이 종료

 

● React (정식 명칭: ReactJS) : 지금은 Meta로 이름이 바뀐 facebook이 만든 오픈소스 JavaScript UI 라이브러리

2013년에 처음 출시되었으며, 출시된 이후 사용률이 점점 증가하다가 현재 다른 라이브러리들을 모두 따돌리고 가장 많이 사용되는 JavaScript UI 라이브러리가 됨

 

● Vue.js : Evan You라는 중국인 개발자 한 명이 시작한 오픈소스 프로젝트

2014년에 처음 출시되었고, 이후 점점 영향력이 커져서 현재는 리액트와 항상 함께 언급되는 JavaScript 대표 프레임워크

 

프레임워크 vs 라이브러리

AngularJS와 Vue.js는 프레임워크, React는 라이브러리 

 

가장 큰 차이점: 프로그램의 흐름에 대한 제어 권한 

● 프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크 자신이 가지고 있음

● 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 떄 가져다 쓰는 형태 

라이브러리는 제어 권한이 개발자에게 있음 

 

웹 개발의 트렌드 

모든 기술에는 트렌드가 있음

 

AngularJS가 웹 개발의 정답인 것처럼 여겨지던 시기가 있었고, 리액트 보다는 다른 것이 훨씬 좋다고 평가되던 시기도 있었음 

-> 한 가지 기술이 무조건 평생 대세일 것이라는 생각을 버리고 기술의 큰 흐름을 읽는 것이 필요

지금은 리액트의 입지가 매우 우세하고 웹개발의 표준처럼 여겨지고 있지만, 앞으로는 다른 새로운 기술이 그 자리를 차지하고 있을 수도 있음

웹사이트의 작동 원리와 흐름을 함꼐 이해하는 것이 중요!

 

(정리) 리액트는 무엇인가?

 

 

리액트는 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 JavaScript 기능 모음집

 

웹사이트를 개발하기 위해서는 HTML, CSS, JavaScript를 모두 잘 다뤄야 하는데, 사이트의 규모가 커지면 커질수록 수많은 페이지를 잘 만들고 관리하기 쉽지 않음

복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것이 React!

 

SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트/웹애플리케이션

규모가 큰 웹사이트의 경우, 수백 개의 페이지가 존재하는데 각각 페이지마다 html로 만드는 것은 매우 비효율적이고 관리하기 힘듦

하나의 html 틀을 만들어놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것이 SPA 

-> React가 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구