[React] 리액트
1. 리액트(React)
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
1) 리액트 정의
사용자 인터페이스(UI, User Interface): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것
2) 다양한 자바스크립트 UI 프레임워크
UI 라이브러리: 사용자 인터페이스를 만들기 위한 기능 라이브러리
- 앵귤러(JS AngularJs): 2010년 구글에서 만든 오픈소스 프로젝트로 자바스크립트 기반의 웹 개발 프레임워크2018년에 LTS(Long Term Support: 단기간 버전 업데이트없이 안정적인 버전을 장기간 유지하는 방식)모드에 돌입하였다가 2022년 1월 LTS 중단 선언 후 공식적인 지원 종료
- 리액트(ReactJS): 2013년 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI라이브러리, 현재 가장 많이 사용되는 자바스크립트 UI라이브러리
- 뷰JS(Vue.js): 2014년 Evan You이라는 중국인 개발자 한 명이 시작한 오픈소스 프로젝트, 점점 영향력이 커져서 현재는 리액트와 항상 함께 언급되는 자바스크립트 대표 프레임워크
| 앵귤러JS와 뷰JS는 프레임워크, 리액트는 라이브러리! 차이점: 프로그램 흐름에 대한 제어 권한 프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있음 => 제어 권한이 프레임워크에 있음 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 => 제어 권한이 개발자에게 있음 |
2. 리액트의 장점
1) 빠른 업데이트와 렌더링 속도
업데이트: 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것
SPA(Single Page Application)
하나의 페이지만 존재하는 웹사이트(또는 웹 어플리케이션)
하나의 HTML틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것
=> 리액트는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구
Virtual DOM: 빠른 업데이트를 위해 리액트 내부적으로 사용하는 것
DOM(Document Object Model): 웹페이지를 정의하는 하나의 객체 => 하나의 웹사이트에 대한 정보를 모두 담은 큰 그릇
Virtual DOM은 웹페이지와 실제 DOM사이에서 중간 매개체 역할을 하는 것
수시로 화면 업데이트가 이루어짐
DOM은 웹사이트의 모든 정보를 담고 있음 -> 화면 업데이트는 DOM이 수정된다는 말과 같음 -> 화면 업데이트를 위해 DOM 수정이 필요함
=> vitual DOM을 사용하지 않는 방식으로 업데이트를 하려면 DOM을 직접 수정해야함 -> 직접 DOM 수정하는 것은 성능에 영향을 미치고 비용도 많이 드는 작업임(수정할 부분을 DOM데이터에서 모두 찾아야하기 때문)
리액트는 DOM을 직접 수정하지 않고 업데이트해야할 최소한의 부분을 찾아서 업데이트함
상태의 변경(State Change) 발생 -> virtual DOM은 업데이트해야할 최소한의 부분을 검색하여 검색된 부분만 업데이트 -> 렌더링하여 변경된 내용을 빠르게 사용자에게 보여줌
2) 컴포넌트 기반(Component-Based) 구조
컴포넌트: 구성요소
리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트 조합으로 구성될 수 있음
컴포넌트 기반 구조는 재사용성이 좋음
3) 재사용성(Reusability)
재사용성: 다시 사용 가능 한 성질
의존성을 낮추고, 호환성 문제가 발생하지 않게하여 소프트웨어 또는 모듈이 다른 곳에서도 쉽게 곧바로 쓸 수 있도록 하는 것
- 개발 기간 단축
- 유지보수 용이
html을 함수, array, object에 보관하여 재사용할 수 있어서 html 관리가 편리해짐