지난번에 리액트 포탈에 대해 공부하다 문득 의문이 들었다.리액트에선 포탈을 이용하여 모달이나 툴팁 등을 사용하는게 더 좋다라고 그러면 자바스크립트를 이용하는건 안되는건지 된다면 어떤 이유때문에 사용을 안하는지 알아보았다. React Portalimport React, { useState } from 'react';import ReactDOM from 'react-dom';// 모달 컴포넌트const Modal = ({ children, onClose }) => { return ReactDOM.createPortal( {children} Close , document.getElementById('modal-root') // Portal을 ..
[React]리액트 포탈이란?
Portal(포탈)React Portal은 컴포넌트의 DOM 계층 구조를 유지하면서도, 실제로는 그 컴포넌트를 다른 DOM 노드에 랜더링할 수 있게 해주는 기능이라고 하며, 주로 모달, 알림, 툴팁과 같은 UI 요소를 화면의 상위 레이어에 표시할때 유용하다고 한다. 예시index.html - 모달 위치 생성 App.tsx - 버튼 클릭시 모달을 보여주기 위한 화면 작업import React from 'react';import './App.css'import Modal from './conpornents/Modal';function App() { const [isOpen, setIsOpen] = React.useState(false); const openModal = () => ..
[React]CSR vs SSR and SPA vs MPA 정리하기
CSR이란클라이언트 사이드 렌더링(Clinent side rendering)이라고 하며 대표적으로 사용하는 프레임워크 및 라이브러리로는 React와 vue, angular가 있다.CSR은 SPA(싱글 페이지 어플리케이션)를 작업하는 렌더링 방식이라고 이해하면 좋을 거 같다.클라이언트는 브라우저를 말하며, HTML 파싱부터 JS 읽기까지 브라우저가 렌더링 한다. CSR 장점과 단점초기 로딩이 길다 : CSR은 클라이언트인 브라우저가 렌더링을 도맡아 처리하는 방식이다보니 서버에서 필요한 데이터를 한 번에 받아오고 받은 데이터를 브라우저가 렌더링하게 된다. 즉 모든 페이지를 한번에 불러와 로딩후 화면에 보여지고 페이지간 전환에 바로바로 반응이 가능해 페이지 이동시 깜빡임 증상이 거의 없다서버 부하가 적다 : ..