[참고: useLayoutEffect]useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.공식문서에서 `useLayoutEffect`는 브라우저가 리페인트되기 전에 실행되는 `useEffect`라고 서술합니다그대로 이해하면 React 컴포넌트가 브라우저에 그려지기전에 `useLayoutEffect`의 로직이 먼저 실행된다는 뜻입니다 이게 정확히 무슨뜻인지 이해하기 전에, 이게 의미가 있는 훅일까요?브라우저가 리페인트되기 전 / 후가 `useEffect` 로직 실행이랑 무슨 상관일까요? 이를 이해하기 위해서는 리액트의 생명주기를 이해하면 좋습니다리액트 생명주기는 아래와 같습니다 1. 마운트 - ..
[이전 글: Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다] [React] Suspense를 활용하면 스피너 지옥에서 탈출할 수 있습니다[참고: Suspense] – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-imajoseph0926.tistory.com 이전 글에서 `Suspense`에 대해서 알아보고 어떤 방식으로 동작하는..
[참고: Server Actions - react.dev] Server Actions – ReactThe library for web and native user interfacesreact.dev[참고: Server Actions - next docs] Data Fetching: Server Actions and Mutations | Next.jsLearn how to handle form submissions and data mutations with Next.js.nextjs.org리액트 18에서 시험적으로 도입된 기능중에 지시문이 존재합니다Directives provide instructions to bundlers compatible with React Server Components. 지시문은..
이번에 회사에서 디자인 시스템까지는 아니지만 다양한 공통 컴포넌트를 설계하였고, 해당 업무를 진행하면서 느낀점을 작성해보려합니다. 해당 컴포넌트 어떤 레벨인가?먼저 공통 컴포넌트로 구현할 컴포넌트가 어느정도 레벨의 컴포넌트인지 파악해야합니다.여기서 말하는 레벨이란 간단한게 3단계로 나눌 수 있을거같습니다 기본 레벨버튼, 입력 필드, 토글 등 일반적인 UI 요소중간 레벨모달, 카드, 네비게이션 바 등 여러 개의 기본 블록이 결합된 UI 컴포넌트애플리케이션 레벨사용자 프로필 카드, 쇼핑 카트, 데이터 테이블 등 특정 도메인과 밀접하게 연결된 컴포넌트 간단한 예시를 들어본다면 ``은 일반적으로 가장 저수준의 컴포넌트입니다.이 컴포넌트 다른 컴포넌트에서 일종의 레고처럼 하나의 블럭으로 사용될 수 있고, 단독으로..
[radix-ui 버그 이슈] Setting display:flex on accordion content creates double animation · Issue #2832 · radix-ui/primitivesBug report Current Behavior The default display for Accordion.Content is block. Setting it to flex causes a double animation when closing a section. Expected behavior The animation should not be af...github.com[해당 이슈에 대한 답변] Setting display:flex on accordion content creates doub..
[참고: Streaming] Routing: Loading UI and Streaming | Next.jsBuilt on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.nextjs.org Streaming allows you to break down the page's HTML into smaller chunks and progressively send those chunks from the server to the client. 일반적으로 서버 렌더링은 아래와 같은 과정으로 진행됩니다. 주어진 페이..
[참고: tanstack query][참고: query.gg] The Official React Query Course - 🔮 query.ggMaster React Query with mystifying ease. Built in collaboration with the React Query core team.query.gg TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com ..
[참고: Suspense] – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-image="https://scrap.kakaocdn.net/dn/cIBo4A/hyW2PgrBzX/WAkmyEkDZsl3ztJjxf1Sx0/img.png?width=1080&height=567&face=0_0_1080_567,https://scrap.kakaocdn.ne..
