본문 바로가기

렌더링2

[모던 리액트 Deep Dive] 2장. 리액트 핵심 요소 깊게 살펴보기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [2장] 리액트 핵심 요소 깊게 살펴보기2.1 JSX란?XML과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다.render() { return ( .. 2024. 6. 29.
렌더링 사형제 CSR, SSR, SSG, ISR ✨CSR (Client-Side Rendering)클라이언트에서 렌더링이 일어나는 방식클라이언트가 React와 개발자 코드를 다운로드해 DOM을 구성하고 화면에 렌더링처음에 빈 HTML 파일을 로드 -> 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링 함 장점 👍🏻 빠른 사용자 경험(UX)과 반응성 제공구동속도가 빠르고 서버 부하가 적음단점 👎🏻 초기 로딩 속도가 느림검색 엔진 최적화(SEO)가 어려움✨SSR (Server-Side Rendering)서버에서 렌더링된 HTML을 클라이언트에 전송하는 방식해당페이지에 대한 전체 HTML을 동적으로 렌더링하고 제공하는 앱 서버에 대한 요청을 시작 -> 사용자가 요청할 때마다 페이지를 요청하고 렌더링하므로 페이지 이동 시 속.. 2024. 5. 28.
반응형