이것저것 스터디📚/글쓰기✍️ (2) 썸네일형 리스트형 CSR, SSG, SSR Next.js를 공부를 시작하면서 웹 사이트의 랜더링 방법에 대해서 학습하게 되었다. 그동안 React를 사용하면서 CSR 개념은 알고 있었지만, CSR과 더불어 다양한 웹 사이트의 렌더링 방법에 대해서 정리해보고자 한다. 1. CSR(Client Side Rendering) - CSR은 렌더링 하는 주체가 클라이언트(브라우저)다. - 서버는 빈 HTML(index.html)과 모든 로직을 처리하는 자바스크립트 번들을 반환한다. - HTML, React 라이브러리 소스 코드, 개발자가 작성한 js(React) 코드를 서버로부터 받고 브라우저가 렌더링을 실시한다. 장점 - 처음 페이지가 로딩된 이후에는 부드럽고 빠른 사용자 경험을 제공한다. - 그 이유는 처음 렌더링을 할 때 필요한 파일들을 모두 서버로부.. 나만의 동적 Portal 컴포넌트 만들기 1. portal이란? 리액트(React)에서 Portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. portal은 보통 모달창을 구현할 때, 많이 사용된다. 2. portal을 사용하는 이유 portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. 3. portal.. 이전 1 다음
