렌더링(Rendering) 컴포넌트를 실행하고 Virtual DOM을 만들고, 필요하다면 실제 DOM 업데이트까지 이어지는 과정.Reconciliation (재조정)Reconciliation은 React가 UI 업데이트 과정에서 어떤 부분을 실제 DOM에 반영할지 결정하는 과정이다React는 render() 결과물(JSX → Virtual DOM)을 Virtual DOM 트리로 관리한다새로운 상태/props로 다시 render()하면 새로운 Virtual DOM 트리를 생성한다이때 React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diffing) 해서 바뀐 부분만 실제 DOM에 반영핵심 포인트효율성: 전체를 다시 그리지 않고, 바뀐 부분만 업데이트Key의 중요성: 리스트 렌더링..

Suspense?React에서 Suspense는 비동기 렌더링을 제어하는 기능이다.fallback UI(보통 로딩 스피너)를 지정해두고,렌더링 과정에서 비동기 데이터가 아직 준비되지 않은 경우 React가 해당 트리 대신 fallback을 먼저 렌더링하게 해줌!데이터가 준비되면 자동으로 원래 UI를 다시 렌더링~즉, Suspense는 비동기 상태를 직접 관리하지 않고도, React가 알아서 "대기 중" → "완료됨" 전환을 해주도록 도와주는 장치! Suspense 동작 원리핵심은 렌더링 중 Promise가 throw되는 순간이라고 한다React는 컴포넌트를 렌더링하다가, 어떤 부분에서 아직 준비되지 않은 데이터가 있으면 Promise를 throw 하게 만듭니다.(예: React.lazy, React C..

useStateReact로 개발을 하다보면 여러가지 훅을 사용하는데 그 중, 아마 가장 많이 사용하는 훅이 useState일 것이다.useState를 이용해서 컴포넌트의 상태를 변화시키면 변화를 감지하여 컴포넌트를 리렌더링하기 위해 씀가끔.. useState 관련해서 깊게 모른다는 생각이 들곤 하는데.. 잘 몰라도 사용법만 알면 잘 작동하기 때문에 그냥 넘어간적이 한두번이 아니였던 것 같기도 하다 ;_;useState, react state에 대해 여러가지 관련된 키워드들에 좀 더 자세히 알아보자 =)immutability, closure, re-rendering, Fiber, reconciliation, 등등...대충 아는척 할 수는 있지만 제대로 모르는 것 같아서 글로 기록해본다!useState 기본..

Dist다들 Javascript 기반의 어플리케이션을 만들기 위해 build해보고 개발환경에서 실행하면서 dist라는 폴더를 자주 봤을 것이다보통 애플리케이션을 웹 브라우저에서 실행하려면 dist 디렉토리를 서버에 업로드한다사실 나는 이 폴더의 용도를 대충 알고 넘어가긴 했었다... 세상이 좋아져서 알 필요가 없었던 것일까..;~vercel, aws s3 등에서 요 빌드 파일(dist)를 올리면 알아서 잘 작동함아무튼 dist 폴더는 JavaScript 애플리케이션을 빌드한 결과물을 포함하는 디렉토리이다.dist/├── index.html├── assets/│ ├── index.[hash].js # 빌드된 JavaScript 번들│ ├── index.[hash].css # 빌드..