리액트 공부를 시작하면서, 웹에 대한 지식이 부족해서 이해하는데 어려움을 느꼈다. 따라서 관련 웹 지식을 정리해보았다.
리액트란?
리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리 (js 문법을 그대로 사용)
UI(USER INTERFACE): 사용자가 사용하는 서비스, 제품 화면 안의 모든 것 (디자인, 레이아웃 등을 모두 아우르는 것)
라이브러리: 내 작업에 다른 사람이 만든 코드를 가져와서 사용
*프레임워크: 다른 사람이 만든 틀 안으로 들어가서 작업하는 것 (모든 환경과 도구 제공- but 그것만 사용 가능)
서버 요청과 SPA의 등장 배경(MPA-multi page application)
: 우리가 웹사이트에 접속하기 위해서는 서버에게 HTML에 대한 요청을 보낸다. 그러면 서버는 데이터베이스에서 꺼내, 그 데이터를 클라이언트의 요청에 따른 HTML 형태로 파일을 돌려준다.
-> 즉, 예전에는 서버가 모든 일들을 처리했다. but, 모니터도 커지고, 컴퓨터의 성능도 좋아지고, js 기술도 발달하며, 하나의 페이지에 보여줘야 할 정보들이 너무 많아진 것이다.
-> 페이지 전환 때 마다, 그 많은 정보들을 다시 요청하여 불러온다면, 불필요한 로딩이 생겨 비효율적이다.
--> 따라서 서버가 웹 페이지도 생성하고, 모든 일들을 처리하는 것이 아니게 되었다. 자바스크립트를 통해 사용자에게 보여줄 웹 페이지는 브라우저에서 해결하도록 만든 것이다.
그러면, 데이터베이스는 어쩔건데??
-> get과 post 메소드를 통하여, 데이터베이스를 서버에 넘겨주고, 서버로부터 받아온다.
- 프론트는 자바스크립트와 URL을 이용해서 서버에게 데이터를 요청하고 응답받는다.
- SPA에서는 웹 페이지가 자바스크립트로 인해 렌더링된다.
- 서버는 URL을 통해 들어온 요청에 대한 응답만 해주면 되고, 이때 METHOD를 살핀다.
- METHOD 종류로는 GET, POST, PATCH, PUT, DELETE 등이 있다.
SPA의 개념
-
SPA (single page application)란?
: 렌더링의 역할을 브라우저 내에서 해결 함, 필요한 데이터만을 서버로부터 전달받아, 동적으로 렌더링 (페이지 이동 시, 자바스크립트 언어만을 통해 DOM구조가 변경 됨!)
(DOM: 문서 객체 모델- xml이나 html에 접근하기 위한 인터페이스. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법 제공)
--> 서버에게 부하 덜 주고, 브라우저에게 일을 줌 -
SSR (서버사이드 렌더링)
: 서버에 리소스 요청하고, 받아온 리소스를 렌더링 함. 요청할 때 정적 리소스가 다운로드 되고, 렌더링 됨.
--> 내 언어로 정리: SPA는 화면 이동 시, 필요한 데이터 만을 서버로부터 받아 동적으로 렌더링 함. 기존의 변경되지 않는 부분은 클라이언트가 그대로 가지고 있음. 그 이전 방식인 SSR은 필요할 때마다 정적으로 리소스가 다운되고 렌더링 됨. 그래서 속도가 오래 걸림.
SPA의 장단점
- 장점
- 화면 전체를 렌더링하지 않기 때문에, 화면 이동이 빠르다.
- 화면에 필요한 데이터 만을 받아서 렌더링하기 때문에, 처리과정이 효율적이다.
- 유저의 입장에서 사용하기 편하다.
- 단점
- 초반에 모두 다운로드를 하기 때문에, 초기 로딩 시간이 오래 걸린다.
- 웹 크롤러에서는 SSR기능을 사용
** 웹 크롤러(스파이더): 검색엔진에서 사용하는 일종의 '봇', 인터넷에서 웹 페이지를 방문해 자료를 수집하는 일(한 페이지에서 링크되어있는 다른 페이지로도 이동)
노드와 npm
- Node: 자바스크립트 실행환경 (브라우저가 아닌)
- npm: 노드를 실행하기 위한 패키지들을 다운로드, 삭제 등을 하게 해주는 매니저 도구 역할
리액트 특징
- 컴포넌트 기반
- 컴포넌트: 재사용 가능한 독립된 모듈 (재활용성, 유지보수 용이, 페이지 구성 파악 용이)
- class component: 초기에 많이 사용하던 컴포넌트 형태, 문법이 복잡
- function component: 간단하고 단순
-
가상 돔 (virtual dom)
: 화면 업데이트하는 과정을 조금 더 효율적으로 (여러가지 수정사항이 있더라도, 한 번만 렌더링)
-> DOM을 반복적으로 직접 조작하면, 브라우저가 자주 렌더링하게 되고, PC자원을 많이 소모하게 됨. 가상 돔을 통해 그 현상을 방지 -
JSX (javascript syntax extension) 사용 가능
: 자바스크립트 확장 문법 (xml + js)
-> jsx는 자바스크립트가 인식할 수 없으므로, babel이라는 패키지 이용해서 변환
⭕ 내 언어로 정리:
리액트는 SPA(싱글페이지를)에 집중한 웹 라이브러리이다. 페이스북에서 제공하는 프론트엔드 라이브러리라고도 한다. 그렇다면 SPA는 뭐길래 요즘 그렇게 인기가 있는걸까? SPA는 SSR 방식과 달리, 서버에게 화면 이동 시 직접 HTML파일을 요청하지 않고, 필요한 부분만을 요청하여 동적으로 렌더링을 하는 것이다. 원래는 서버에게 HTML파일 자체를 요구해서(데이터베이스도) 서버의 일이 막중했다. 그러나 웹 페이지의 보여지는 부분은 브라우저에서 해결 할 수 있도록 한 것이다. 따라서 데이터베이스는 브라우저에서 GET과 POST 방식을 통해 (서버를 통해) 접근할 수 있게 한 것이다.
그러한 싱글페이지의 ui를 위한 라이브러리가 리액트이다. 리액트의 특징은 JSX 사용 가능하다는 것이다. JS에 HTML이 합쳐진 것으로 더욱 쉽다. 하지만 JS가 인식하지 못하므로, BABEL 패키지를 통해서 변환된다. 또한, 가상돔을 이용한다. 가상 돔은 딱 한 번만 수정사항들을 모아 렌더링한다. 여러차례 렌더링을 통한 컴퓨터 자원 낭비를 방지한다. 또한, 리액트는 컴포넌트 단위이다. 컴포넌트는 CLASS, 함수 컴포넌트가 있다. 컴포넌트는 독립된 모듈로서, 재사용이 가능하고 유지보수가 용이하다.
