📈 리액트의 프레임워크
우선, 알아둘점 React 는 "라이브러리" 다
프레임워크와 라이브러리 차이
프레임워크 : 원하는 기능 구현에 집중, 개발 가능한 필요 기능 갖추고 있는 것
라이브러리 : sw 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 특정 기능들을 모듈화프레임워크와 라이브러리 개념 (제어 흐름의 권한)
프레임워크의 Process
프레임워크가 코드를 호출 (정해진 틀에 맞게 사용자가 필요 기능 사용)
라이브러리의 Process
코드가 라이브러리를 호출 (개발자가 원할 때 호출)🥸 React 의 작동원리 & 문제
앞으로의 회사는 그저 React 를 사용하기 보다는 React 의 프레임워크를 사용하게 될 것이다.
React 는 "CSR(Client Side Rendering)" 방식으로 동작
이는, <유저가 웹사이트 이동 -> JS를 다운 -> 리액트가 UI 빌드> 하는 순서이다.
So, 자바스크립트를 다운받지 못하면 리액트가 UI 빌드를 하지못하여 사용자는 흰 화면만 보게됨 🤣 React 프레임워크의 종류
Gatsby
Gatsby 는 작성한 React 구성요소를 가져다가 공용 폴더에서 일반 HTML 로 렌더링을 함
=> 유저가 웹사이트에서 기다릴 필요 없이 바로 UI를 볼 수 있음
=> 사전에 HTML 페이지를 미리 생성 후 페이지 로딩이 끝나면, interactive 됨
=> 플러그인이 존재, 플러그인 덕에 데이터를 사전 렌더링 HTML 이 생성되기 전에 App에 추가가능
=> GraphQL 을 사용하여 마크다운 파일에서 데이터 추출 가능
랜딩페이지 or 블로그 처럼 정적인 웹사이트를 만들기 좋음
HTML 을 바로 주고, 미리 렌더링한 상태
웹사이트를 게시하기 전에 페이지를 미리 생성하는 원리Remix
배포를 위한 서버를 미리 설정해야 동작 가능 => (Remix App Server, Express Server, ...)
백엔드에서 리액트 JS 를 실행하기 때문
결과물이 유저에게 전달되며 유저는 로딩중 화면을 볼 일이 없음
페이지에 도착하면, 100% rendering 된 UI 를 한번에 봄
데이터를 가져오거나 내보내는 방식이 기존에 알던 것과 많이 다름
"SSR (서버 사이드 렌더링)"
loader 함수를 통해 직접적 DB 호출 OK
보안 위험 X, 서버에서 작동하기 때문
API Url, useState 사용할 일 없음
loading State 또한 관리할 필요 없음
양식에 제출하기 위해서는 Action 함수로 처리 후 반환
요구될 때만, 해당 HTML 생성
사용자가 요청할 때 서버측에서 모든 코드 실행Next.js
개츠비처럼 미리 랜더링 OK, 마크다운으로 블로그 생성 가능
리믹스처럼 서버측 코드 실행 가능
리액트 훅의 fetch, useState, useEffect 사용 가능
=> 서버 측 렌더링, 정적 사이트 생성 등의 기능 가능
=> 장점, 쉬운페이지 라우팅 & API 경로 & 즉시 사용가능한 TS/SASS
정적사이트 생성, 쉬운 배포
SSR (서버사이드 렌더링)
서버에서 사용자에게 보여줄 페이지를 모두 미리 구성 뒤 페이지를 렌더링
초기화면 수행할 때는 SSR
페이지 이동 / 동작이 발생할 때는 CSR
Gatsby 의 미리 렌더링하는거나 Remix의 SSR 가능👌 SSR 을 사용하는 이유
초기페이지 로딩 시간 빠름, 파일이 로드되기 전에 페이지 모두 구성되어 있어 SEO 점수 높음
(SEO, 검색엔진 최적화)
ㄴ> 웹사이트 결과 더 잘보이도록 최적화, 상단에 노출
(검색엔진 봇들이 초기 HTML 빈 페이지에 아무것도 없기에 데이터 수집 못하여 노출 힘듬)
