React

React Package component 정의다른 패키지에 의존성이 없으므로 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능React Library의 react package는 UI Component & 상태관리 담당플랫폼(브라우저 / 모바일)에 대한 렌더링은

가볍게 읽고 지나가라는데, 난 가볍게 지나갈 수가 없는데..? 주요 키워드 Render phase, Commit phase, Side effect Render phase - VDOM 조작단계

hook의 동작원리1\. 훅 구현체 찾아가기2\. 훅은 어떻게 생성되는가?(mount)3\. 훅은 어떻게 상태를 변경하고 컴포넌트를 리-렌더링시키는가?4\. 상태가 변경되어 리렌더될 떄 변경된 상태 값은 어떻게 가지고 오는 것일까?(update)우리는 일반적으로 rea

JSX로 작성한 컴포넌트들이 어떻게 React element로 변환되고, VDOM에 올리기 위해 어떤 방식으로 fiber로 확장하는지 알아보기 React element > Host Component - div / input / button / etc -> HTML e

reconcileChildren 재조정 작업의 목적은 VDOM 트리에서 변경이 발생한 부분을 효과적으로 비교하여 새로운 트리를 만들어내는 것입니다. > * 휴리스틱 알고리즘 * 서로 다른 type의 두 엘리먼트는 서로 다른 트리를 만든다. 개발자는 key prop을

오랜만이네App, Todo, Input의 fiber들은 모두 bailout을 통해 기존 current를 그대로 가져와서 workInProgress로 사용합니다.Input 컴포넌트를 호출하여 input과 button을 담고 있는 Fragment를 반환받습니다. key가

input 입력 \-> onChange에 의해 state값이 변경\-> setState가 호출되면 react 내부적으로 dispatchAction이 호출\-> updateQueue에 렌더링해야한다고 push함\-> beginwork를 통해 updateFunctionCo

Commit Phase PerformSyncWorkOnRoot() finishSyncRender() CommitRootImpl() commitBeforeMutationEffects() flushPassiveEffectImpl() Life cycle effect

React Suspense란? 공식문서 - React Suspense ``는 child element의 loading이 완료될 때까지 대체 항목을 표시하게 해주는 역할을 한다.\ 위 코드를 예시로 들면 `가 완료될 때까지 컴포넌트를 보여주고 가 완료되면 `을 보여주

이해하기 쉽게 설명하려고 개념 몇개가 생략되었습니다. 궁금한 게 있을 때 질문주시면 답변해드릴게요 전통적인 Web의 문제점, MPA(Multi Page Application)가 무엇인가? SPA(Single Page Application)가 등장하기 전에 웹은 주로

Class Component & this Class? class란 반복되는 함수 또는 변수 모음집이라고 생각하면 된다. class는 new 연산자를 통해 새로운 instance들을 생성한다. class에서 함수와 변수를 사용할 때는 function, let, cons

Apollo Client란? Apollo Client 공식문서 Apollo Client는 GraphQL client를 위한 라이브러리로, 클라이언트와 서버 간의 GraphQL 통신을 쉽게 구현할 수 있게 해준다. Apollo Client를 사용하면 클라이언트 애플리케

Memoization이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. React는 컴포넌트 기반 라이브러리로, 데이터 변경에 따라 UI를 자

Shallow Routing Shallow Routing은 Next.js에서 URL을 변경하면서도 페이지를 리렌더링하지 않고 상태를 유지할 수 있는 기법이다. 이를 통해 페이지의 URL만 변경하고, 페이지 내에서 컴포넌트나 상태는 그대로 유지하는 방식으로 동작한다. 즉

React에서 Form을 효율적으로 관리하기 위한 라이브러리이다. 이 라이브러리는 폼 상태 관리와 유효성 검사를 간편하게 처리할 수 있도록 설계되었으며, 비제어 컴포넌트(uncontrolled components)를 기반으로 성능을 최적화한다. 특히, 다중 필드를 가진

모든 내용은 Redux 공식문서를 기반으로 작성되었습니다. https://redux.js.org/ 서론 프론트엔드 개발을 하다보면 상태관리 중요성을 실감하게 된다. 특히 규모가 점차 커질수록 컴포넌트 간 상태 공유가 복잡해지고 유지보수가 어려워지는 문제가 발생할 수

Usage Summary Install Redux Toolkit and React Redux Common React Redux VS RTK Reducer ` > React Redux vs RTK > 리듀서 선언 방식 React Redux에서는 리듀서를 수동으로 작

https://react-redux.js.org/tutorials/connect Example Introduce React UI Components TodoApp TodoApp은 UI Components를 감싸는 부모 컴포넌트이다. header,AddTodo, Tod

서론 다들 react를 개발하면서 state를 관리하는 라이브러리를 사용하지 않는 경우는 거의 없을 것이다. 필자 또한 init setting할 때 자연스레 상태관리 라이브러리를 설치한다. useState / useContext로만으로 react를 처리하기엔 한계가