아래의 익숙한 로딩 스피너를 만드는 CSS 코드를 찾아봤는데, 생각보다 코드 반복이 많다 이렇게 blade 하나씩 전부 회전 각도가 달라야 하기 때문이다 SCSS를 활용해도 mixin과 function으로 반복을 줄일 수 있을 것이다 하지만 이번에는 Styled-components를 활용하여 반복을 줄여 본다 📍1. props로 모든 blade에 각각 다른 회전 각도 부여하기 1) 먼저, blade 갯수 기본값을 정의하고, 배열을 만들고 map으로 blade 컴포넌트를 렌더링한다 2) styled props를 활용해 0 * (360 / 12) deg, 1 * (360 / 12) deg ... 이렇게 자동으로 회전각을 부여해준다 - 이 상태에서는 2번의 원 형태로 나오게 된다 (최대 배율 확대 상태) - ..

📍개요✅일부 JSX 조각을 React Root가 아닌 DOM의 일부분으로 렌더링할 때 사용- 즉, 렌더링하고 싶은 JSX 조각을, 원하는 위치로 바로 연결되는 '입구' (Portal)를 만들고 싶을 때 사용예) 팝업이나 모달 등 {createPortal(children, domNode, key?)} 📍createPortal API✅createPortal(children, domNode, key?)- children : 새로 만들어낼 React 컴포넌트 (JSX 조각, fragment, 문자열, 숫자)- domNode : 만든 컴포넌트를 렌더링할 부분. 이미 DOM에 존재하고 있는 곳이어야 함 (DOM API로 찾을 수 있는 곳)- key (optional) : 포털의 키값으로 사용할 고유 문자열..

📍개요 ✅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..