React
A JavaScript library for building user Interfaces
React를 통해서 UI를 Building 할 수 있다.
UI를 Building 한다는 것은 보여지는 부분을 구축한다는 의미!
React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나. 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.
SPA 아키텍쳐
Single Page Application , 한 개의 페이지로 이루어진 애플리케이션.
MPA(Multi Page Application, )와는 상반된 개념이다.
기존 MPA의 문제점
- 좋아요 눌렀는데 웹사이트가 다시 로딩된다?
- 요즘에는 리렌더링 즉, 페이지가 갱신되는 상황이 매우 많기 때문에 계속해서 깜빡거릴 것이다.
SPA의 특징과 장점
- 딱 한개의 페이지로 구성된 웹 앱이다.
- 서버에 1회 리소스를 요청한다.
- 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’ 해주는 방식으로 화면을 수정한다.
- 사용자 입장에서 깜빡임없는 굉장히 자연스러운 UX를 구현할 수 있다.
- 비슷한 기술들 → Angular, Vue (구현의 차이는 존재)
단점? SEO에 약하다
SEO (Search Engine Optimization) 서치 엔진 최적화.
구글에서 어떤 키워드를 입력할 때 그것과 관련된 페이지들을 추천해주는데, 그렇게 하기 위해서는
엔진이 찾으려고하는 웹사이트들을 잘 찾을 수 있도록 홈페이지가 그 키워드에 맞는 HTML 파일을 잘 제공을 해 줘야 된다. → 보완하기 위해 Next.js도 많이 쓰이는 중
컴포넌트?
리액트가 채택한 개발방법
[컴포넌트 = 벽돌] 이라고 이해하면 쉽다. 벽돌을 쌓아 집을 짓는다.
헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발을 하는 것.
어떤 웹 사이트에 변경이 일어났다고 했을 때 SPA 기반은 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X (렌더링)
