📍개요 ✅hydrateRoot와 비슷 createRoot API로 브라우저 DOM node 안에 React 컴포넌트를 추가할 root element를 만들 수 있다 1. root를 만들고, (createRoot) 2. React 컴포넌트를 렌더링 (render) ✅Vite React App에서 createRoot 쓰임새 살펴보기 ✅createRoot 와 hydrateRoot 비교 📍createRoot API 1. createRoot(domNode, options?) : React Root 객체 (render, unmount 메서드를 보유) 를 반환 - domNode : DOM element (하위에 React Component를 표시) import { createRoot } from 'react-dom/..

📍React에서 Hydrate란?✅Hydrate의 사전적 의미: 수화 (예 - 메마른 꽃에 물을 줘서 생기있게 만드는 것)서버 사이드 렌더링된 HTML을 클라이언트 사이드에서 enhance하여 feature를 가진 App 형태로 완성시키는 것enhance 내용 : 상태(state), interaction 등을 추가  📍hydrateRoot API✅createRoot와 비슷hydrateRoot 를 호출하여 서버 환경에서 이미 렌더링된 기존 HTML(domNode)에 React(reactNode)를 부착 import { hydrateRoot } from 'react-dom/client';const domNode = document.getElementById('root');const root = hydra..

📍개요 1. 이미지 경로 문자열을 상태로 관리하기 2. input element 로 이미지 입력받을 때 주의할 점 3. 입력받은 이미지 미리보기 기능 📍코드 ✅이미지 경로 문자열을 저장할 상태를 만든다 => imgSrc ✅input element에서 type="file", accept="image/*" 로 설정하면, 파일 중에서 이미지 파일만 입력받게 설정할 수 있다 // test.tsx import { useState } from "react"; import Image from "next/image"; export default function TestPage() { const [imgSrc, setImgSrc] = useState( // /public 내의 기본 이미지 경로 "/images/defau..

이전 글 2023.03.26 - [🛠️FE Lib & FW/React] - [React Docs] React 방식으로 생각하기 (1) [React Docs] React 방식으로 생각하기 (1) 📍참고 https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 📍목표 아래의 json 데이터와 디자인 목업을 React로 구현해보자 - json [ { category: "Fruits", pri ggarden.tistory.com 📍참고 https://react.dev/learn/thinking-in-react Thinking in React – R..

📍참고 https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 📍목표 아래의 json 데이터와 디자인 목업을 React로 구현해보자 - json [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, { cate..

리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition2. useCallback 📍useCallback✅리렌더링 간 함수 정의를 캐시할 수 있는 훅- 컴포넌트 상단에서 호출const cachedFn = useCallback(fn, dependencies) 📍useCallback(fn, dependencies)✅매개변수fn- 종속성 배열(dependency array) 의 원소가 바뀌지 않으면 캐시되는 함수- 종속성 배열의 원소가 바뀌면, 렌더링 중에 전달한 콜백 함수를 리턴하고, 재사용에 대비하여 저장(캐싱) dependencies- fn 코드 내부에서 참조되는 모든 반응형 값(props, state 및 컴포넌트 내부의 모든 변수와 함수) 배..

리액트 공식 문서(react.dev) 읽기 더보기 Built-in React Hooks 1. useTransition 📍참고 https://react.dev/reference/react/useTransition useTransition The library for web and native user interfaces react.dev 📍원치 않는 로딩 UI 방지하기 Suspense 컴포넌트의 fallback을 활용해 로딩 UI를 만들 수 있다- 그런데, 로딩 UI가 전체 UI 를 다 가리고 표현되면 유저 경험을 해치게 된다 UI를 변경하는 동작을 startTransiton으로 래핑하면, 이 동작은 기존 UI를 blocking하지 않는다 📍suspense 가능한 router 구축 React 팀에서는 Re..

리액트 공식 문서(react.dev) 읽기 더보기 Built-in React Hooks 1. useTransition 📍useTransition ✅UI blocking 없이 state를 변경할 수 있는 hook const [isPending, startTransition] = useTransition() 📍useTransition() ✅컴포넌트 최상단에서 useTransition() 을 호출하여 일부 상태 업데이트 (set 함수)를 transition으로 표시 import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } ✅매개변수 - 없음..