[React] 리액트의 렌더링 구조

리액트 렌더링?React는 UI를 업데이트하고 유지하는 효율적인 방식을 제공하는 라이브러리이다. 렌더링은 React에서 컴포넌트의 상태(state) 또는 props가 변경될 때 UI를 업데이트하는 과정이다. React의 렌더링은 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 동작하여 각각 동작 원리를 알아보아야 한다. 최근에는 함수형 컴포넌트를 지향하고 있으며 공식 문서에서도 함수형 컴포넌트 방식을 권장한다. 렌더링 프로세스렌더링 촉발(Triggering a Render)컴포넌트 렌더링(Rendering the Component)DOM에 커밋(Committing to the DOM)리액트 공식 문서에서는 아래와 같은 비유로 설명하고 있다.렌더링 촉발: 손님의 주문을 주방으로 전달하는 단계입니다.컴포넌트 ..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms

MPA와 SPA 그리고 SSR과 CSR을 알아보자

MPA (Multi Page Application)란?MPA는 전통적인 웹 애플리케이션 형태로, 여러 개의 HTML 페이지로 구성된다. 각 페이지는 독립적인 HTML 파일로 존재하며 사용자가 페이지를 이동할 때마다 서버에서 해당 HTML 파일을 받아와 브라우저에서 렌더링합니다. 이러한 방식은 웹 개발 초창기부터 사용되어 왔으며 간단한 웹사이트나 콘텐츠 중심의 웹 서비스에 적합하다. MPA의 장점검색 엔진 최적화(SEO)에 용이: 각 페이지가 독립적인 URL과 콘텐츠를 가지므로 검색 엔진이 페이지를 쉽게 크롤링하고 색인할 수 있다.브라우저 호환성 문제가 적다: MPA는 오래된 브라우저에서도 잘 작동하며, 특별한 기술이나 라이브러리가 필요하지 않다.서버 측 렌더링으로 인해 서버에서 추가적인 보안 제어가 가능..

• format_list_bulleted Frontend
• · 2024. 8. 13.
• textsms