리액트

컴포넌트 함수가 호출되서 VDOM에 반영되는것. (더 간단하게는 컴포넌트 함수가 호출되는것 -> 어차피 return을 통해 VDOM에 반영되니까)간단하게 얘기를 하자면 리액트에서 VDOM에 컴포넌트가 렌더링이 되고 state 같은것들이 바뀌면 새롭게 VDOM 생기면서

서버사이드 렌더링(SSR) 은 사용자에게 최초에 보여질 페이지를 서버에서 랜더링해 빠르게 사용자에게 화면을 보여주는 방식을 말한다.SSR은 서버에서의 렌더링을 마치고, 데이터가 결합된 HTML파일을 내려주는 방식이다. 새로운 페이지로 이동할 때마다 서버에 요청하여 페이

watch 와 useWatch React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 훅폼에는 폼의 상태를 추적하는 데 사용하는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다. watch 함수

Fiber는 React가 App 상태의 내부 표현을 유지하는 아키텍처입니다. FiberRootNode와 FiberNode들로 구성된 트리와 같은 구조입니다. 여러 종류의 FiberNode가 있으며 그 중 일부는 DOM 노드를 가지고 있는 HostComponent입니다.

리액트의 내부 개요는 위와 같은 4단계로 간단히 말할 수 있습니다.이 단계를 'Trigger'라고 명명한 이유는 모든 작업이 여기서 시작되기 때문입니다. 초기 마운트이든 상태 훅에 의한 리렌더링이든 상관없이 이 단계에서 시작됩니다. 이 단계에서는 React 런타임에게

React의 제어/비제어 컴포넌트와 Virtual DOM의 관계 이해하기 들어가기전... React에서 폼을 다루는 방식은 크게 제어 컴포넌트와 비제어 컴포넌트로 나뉩니다. 여기에 forwardRef를 더해 각각의 개념과 Virtual DOM과의 관계를 자세히 알아보

https://github.com/Bookiwi-hub/flow/blob/deep-dive/apps/reader/src/hooks/useAsync.ts위에 훅을 공부 하던중 비동기 처리를 ref 를 이용하여 위에 훅으로 사용할 수 있는 훅을 만든것을 보았는데

useRef 파해치기 이전 포스트와 이어집니다훅 확인하기이 코드의 핵심 동작을 단계별로 보면이 두 줄이 이 훅에서 가장 중요한 부분. 첫 번째 줄(const ref = useRef(func))은 초기 렌더링 시 mountRef() 함수를 통해 { current: fun

React 개발자라면 useEffect는 매우 친숙한 훅일 것입니다. 하지만 그의 사촌 격인 useLayoutEffect는 상대적으로 덜 사용되고 이해되는 경향이 있죠. 이 두 훅은 언뜻 보기에 비슷하지만, React 내부적으로는 상당히 다른 타이밍에 실행됩니다. 이

React 애플리케이션을 개발하다 보면 예기치 않은 에러를 마주치게 됩니다. 컴포넌트가 렌더링 과정에서 에러가 발생하면 어떻게 될까요? React 16에서 도입된 ErrorBoundary로 이러한 문제를 해결할 수 있습니다. 이 글에서는 ErrorBoundary의 개념

React Suspense 완벽 가이드: 데이터 로딩을 우아하게 처리하기 React로 개발할 때 가장 까다로운 작업 중 하나는 비동기 데이터를 로딩하는 동안 사용자에게 적절한 로딩 상태를 표시하는 것입니다. 이를 위해 React 팀은 Suspense라는 강력한 기능을

React key 속성의 모든 것: 내부 작동 원리와 최적화 방법 React를 사용하다 보면 자주 마주치는 경고 중 하나가 있습니다: > Warning: Each child in a list should have a unique "key" prop. 리스트를 렌더

React로 대규모 애플리케이션을 개발할 때 마주치는 가장 큰 문제 중 하나는 초기 로딩 시간입니다. 사용자가 애플리케이션에 처음 접속할 때 모든 코드를 한 번에 다운로드하면 초기 로딩 시간이 길어져 사용자 경험이 저하됩니다. 이런 문제를 해결하기 위해 React는 l

안녕하세요,오늘은 React의 혁신적인 기능인 서버 컴포넌트(React Server Components, RSC)에 대해 자세히 알아보겠습니다. 서버 컴포넌트는 React 개발 방식을 크게 바꿀 수 있는 중요한 기술입니다. 이 글에서는 서버 컴포넌트의 작동 원리, 기존

안녕하세요! 오늘은 React에서 가장 많이 사용되는 훅 중 하나인 useEffect의 내부 동작 원리와 생명주기에 대해 자세히 알아보겠습니다. React 18.2.0 버전을 기준으로 설명하며, 최신 버전에서는 일부 구현이 변경되었을 수 있습니다.useEffect란 무

안녕하세요! 프론트엔드 개발자를 꿈꾸시는 분들께 도움이 될 만한 내용을 준비했습니다. 오늘은 React의 가장 기본적인 훅인 useState의 내부 동작 원리에 대해 깊이 있게 살펴보겠습니다. React 18.2.0 버전을 기준으로 작성되었으며, 최신 버전에서는 일부

React에서 useRef 대신 Callback Ref 사용하기: 성능 최적화 안녕하세요! 오늘은 React에서 DOM 요소에 접근할 때 흔히 사용하는 useRef와 useEffect 조합 대신, callback ref를 활용해 성능을 최적화하는 방법에 대해 알아보겠

TanStack Router 소개(2. 주요 기능과 장점(3. 설치 및 기본 설정(4. 고급 사용법(5. 배포 시 새로고침 문제 (404 오류)(6. 해결 방법과 원리(7. 정적 호스팅 서비스별 설정 가이드(TanStack Router는 Tanner Linsley가 개

안녕하세요! 오늘은 React의 useEffect 훅에서 클린업 함수가 얼마나 중요한지에 대해 실제 프로젝트에서 겪었던 문제와 해결 과정을 공유하려고 합니다. 이 글을 통해 클린업 함수의 중요성과 제대로 구현하지 않았을 때 발생할 수 있는 문제점들을 살펴보겠습니다.최근

안녕하세요, 오늘은 React의 useEffect가 실제로 언제 실행되는지에 대해알아보겠습니다. React 공식 문서에서는 useEffect의 실행 타이밍에 대해 간단하게 설명하고 있지만, 실제 동작은 훨씬 더 복잡합니다.React 공식 문서의 설명은 정확한가?(2.

안녕하세요! 오늘은 React의 숨겨진 보석과도 같은 기능인 Offscreen 컴포넌트에 대해 소개해 드리려고 합니다. React 18에서 Suspense의 내부 구현을 위해 사용되는 이 컴포넌트는 아직 공식적으로 공개되지 않았지만, React 팀은 미래에 개발자들이

안녕하세요! 오늘은 React의 가장 혁신적인 기능 중 하나인 Concurrent Mode에 대해 깊이 있게 알아보려고 합니다. React 18과 함께 정식으로 도입된 이 기능은 React 애플리케이션의 성능과 사용자 경험을 획기적으로 개선할 수 있는 잠재력을 가지고

페이지 새로고침 없이 URL을 변경하는 마법, pushState API를 파헤쳐보자pushState란 무엇인가?(2. pushState 동작 원리(3. 기본 사용법과 예제(4. popstate 이벤트 이해하기(5. React에서 pushState 활용하기(6. 인터셉팅

들어가며(- 문제 상황(- 가상 스크롤링이란?(- 가상 스크롤링 구현하기(- 성능 비교 결과(- 실제 구현에서의 고려사항(- 언제 사용해야 할까?(- 추가 최적화 팁(- 마무리(EPUB 리더를 개발하면서 마주한 문제가 있었습니다. 수백 개의 목차 항목이 있는 책에서 스