개발하는 너구리

Next.js  Server-Side Rendering (SSR) **Server-Side Rendering (SSR)**는 페이지를 서버에서 렌더링하고, 완전히 렌더링된 HTML을 클라이언트로 보내는 방법입니다. 클라이언트는 초기 렌더링을 기다릴 필요가 없으며, 즉시 사용자에게 완전한 페이지를 제공합니다. Next.js는 기본적으로 SSR을 지원합니다.특징:초기 로드 속도: 서버에서 렌더링된 HTML을 전송하므로 초기 로드 속도가 빠릅니다.SEO 친화적: 검색 엔진이 완전한 HTML을 크롤링할 수 있어 SEO에 유리합니다.데이터 보안: 데이터가 서버에서만 렌더링되므로 보안이 강화됩니다.   React Server Components React Server Components는 React에서 새로운 기능..

React Router v6에서는 createBrowserRouter 함수를 사용하여 클라이언트 측 라우터를 생성할 수 있습니다. 이 함수는 주로 라우트 설정과 함께 데이터를 로드하거나 폼 제출을 처리하는 loader와 action을 정의하는 데 사용됩니다. 이들 함수는 라우트가 활성화될 때 데이터를 비동기적으로 로드하거나 폼 제출을 처리하는 데 매우 유용합니다.  createBrowserRouter 기본 구조import { createBrowserRouter, RouterProvider } from "react-router-dom";import App from "./App";import SomeComponent from "./SomeComponent";import SomeOtherComponent fr..

렌더 단계(Render Phase) 컴포넌트 렌더링: 렌더 단계는 컴포넌트 트리를 순회하면서 해당 컴포넌트의 UI를 생성합니다. 이때 render() 메서드 또는 함수형 컴포넌트의 반환값을 기반으로 UI를 생성합니다.가상 DOM 업데이트: 렌더 단계에서는 생성된 UI를 기반으로 가상 DOM을 업데이트합니다. 가상 DOM은 실제 DOM에 대한 가상의 복제품으로, 실제 DOM을 직접 조작하는 대신 가상 DOM을 조작하여 성능을 향상시킵니다.컴포넌트 업데이트 결정: 리액트는 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이때 렌더링 결과가 이전 결과와 동일하면 실제 DOM에는 변경 사항이 반영되지 않습니다.    커밋 단계(Commit Phase) 실제 DOM 갱신: 커밋 단계에서..

리액트의 버추얼 돔 (Virtual DOM) 개념버추얼 돔은 리액트가 UI를 효율적으로 업데이트하기 위해 사용하는 개념입니다. 실제 돔(Document Object Model)은 브라우저에서 렌더링하는 동안 매우 비싼 연산을 요구하므로, 리액트는 메모리 내에 경량의 버추얼 돔을 유지하고 이를 통해 실제 돔을 최소한으로 조작합니다. 동작 방식 Initial Render: 리액트 컴포넌트가 처음 렌더링될 때, 리액트는 버추얼 돔을 생성합니다. 이는 실제 돔의 가상 표현으로, 메모리에 저장됩니다.State/Props Update: 컴포넌트의 상태(state)나 속성(props)이 변경되면, 리액트는 새로운 버추얼 돔을 생성합니다.Diffing: 리액트는 이전 버추얼 돔과 새로운 버추얼 돔을 비교(diffing..

리액트의 렌더링 과정은 복잡하고 정교하게 설계되어 있습니다. 1. 초기 렌더링 (Mounting)초기 렌더링은 컴포넌트가 처음으로 DOM에 삽입되는 과정입니다. 이 과정에서 리액트는 다음 단계를 거칩니다:Constructor 호출 (클래스 컴포넌트의 경우):컴포넌트의 생성자가 호출됩니다.상태와 기타 초기 설정이 이루어집니다.this.state를 초기화합니다.getDerivedStateFromProps 호출:새로운 props가 전달될 때 상태를 갱신할 수 있습니다.정적 메서드로, 컴포넌트 인스턴스에 접근하지 않습니다.Render 호출:render 메서드가 호출되어 JSX를 반환합니다.리액트는 이 JSX를 가상 DOM으로 변환합니다.React Updates the DOM and refs:리액트는 가상 DOM..

createPortal createPortal은 React에서 제공하는 메서드로, 부모 컴포넌트의 DOM 계층 밖에 있는 DOM 노드에 자식 컴포넌트를 렌더링할 수 있게 해줍니다.용도: 모달, 툴팁, 다른 콘텐츠 위에 나타나야 하는 UI 요소를 렌더링할 때 자주 사용됩니다.  useRef  useRef는 컴포넌트가 리렌더링 되더라도 값이 변하지 않고 유지되는 변수를 관리하는 훅입니다. 값이 변경되어도 컴포넌트 리렌더링을 트리거하지 않습니다.용도: 주로 DOM 요소에 직접 접근하거나 렌더링 간에 값을 유지해야 할 때 사용됩니다. useImperativeHandleuseImperativeHandle은 부모 컴포넌트에서 ref를 사용할 때 노출되는 인스턴스 값을 사용자 정의할 수 있는 훅입니다. 이를 통해 부..

React에서 컴포넌트에 부여하는 key 속성은 다음과 같은 이유로 사용됩니다 성능 최적화key 속성을 사용하면 React가 컴포넌트의 변경 사항을 더 효율적으로 감지할 수 있습니다. 예를 들어, 리스트에서 각 항목에 고유한 key를 제공하면 React가 항목을 식별하고 재사용하거나 변경 사항을 추적할 수 있습니다.  재사용 가능한 컴포넌트 관리리스트나 반복되는 요소들에서 key를 사용하면 React가 요소를 식별하고 관리할 수 있습니다. 이를 통해 React는 변경된 요소만 업데이트하고 나머지는 유지합니다. 동기화 문제 해결동일한 컴포넌트를 여러 번 렌더링하거나 업데이트할 때 각 컴포넌트에 고유한 key를 제공하면 React가 각 컴포넌트를 서로 구별할 수 있습니다. 이를 통해 예기치 않은 동작이나 문..

vite로 리액트 라이브러리와 TS언어로 생성한 프로젝트폴더의 tsconfig.json파일의 내용이다.vite를 이용해 프로젝트를 생성하면 자동으로 생성해주기때문에 그동안 해당 파일의 내용에 대해 잘 모르고 사용했었지만, 앞으로 반드시 프로젝트에 성격과 통일성에 따라 수정할 날이 올것이기에 미리 속성들에 대해 공부했다.{ "compilerOptions": { "target": "ES2020", //TypeScript가 컴파일된 JavaScript 코드의 버전을 지정합니다. 여기서는 ECMAScript 2020을 타겟으로 합니다. "useDefineForClassFields": true, //이 옵션이 true로 설정되면 클래스 필드는 define 방식으로 초기화됩니다. ..