[React 까보기] 5. setState (feat. dispatchAction)

useState를 호출한다는 것은 mountState 함수를 호출하는 것과 같다는 것을 이전 포스팅에서 알아보았다.따라서 우리가 잘 알고있는 setState를 통해 상태를 업데이트 하는 과정은 dispatch 함수를 분석한다면 알 수 있을 것 이다.위에서 말한 dispatch 함수에는 dispatchAction.bind() 함수의 값이 할당 되어 있으므로 dispatchAction을 분석해보겠다.1️⃣ dispatchAction 함수 function dispatchAction( fiber: Fiber, queue: UpdateQueue, action: A,) { // 3. update 소비중 다시 update 발생 // renderWithHooks 내부에서 1씩 증가시켰던 numberOfRere..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 4. useState 의 구현체

이전 포스팅(3. Hook 구현체 찾아가기) 에서 renderWithHooks 내부의 ReactCurrentDispatcher.current = HooksDispatcherOnMount 를 확인하였고,HooksDispatcherOnMount 에서 mountState를 발견하였다. 이때 mountState를 분석하면아래에 나올 hook, queue, update 객체를 살펴볼 수 있다.0️⃣ mountState()function mountState( initialState: (() => S) | S,): [S, Dispatch>] { // 1번 const hook = mountWorkInProgressHook(); // 초기 state if (typeof initialState === 'fun..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 3. Hook 구현체 찾아가기

1️⃣ useState가 코드로 정의된 곳은 어디일까? Reconciler 까지 찾아가기!react 코어 → ReactHooks.js 모듈 → ReactCurrentDispatcher 모듈 → current:null 인 객체가 끝?(리액트 코어 패키지는 react 요소에 대한 내용만 포함할 뿐 훅을 구현하고있지 않다.)Render Phase에서 VDOM으로 리액트 요소가 올라갈때 hook에 대한 정보를 포함하게 된다. (리액트 요소가 Fiber로 확장되기 전에는 필수적인 정보만 포함한다)VDOM에 재조정 하기 위한 과정중 하나인 Fiber로 확장하는 작업은 Reconciler가 Render Phase에서 수행하게된다.따라서 Reconciler가 hook에 대한 정보를 알 수 있을것이라 추측하고, Reco..

• format_list_bulleted FE/React
• · 2025. 4. 26.
• textsms

[React 까보기] 2. VDOM 과 React lifecycle

1️⃣ Virtual DOM더블 버퍼링 형태종류DOM에 마운트된 current 트리(fiber 노드로 구성됨)Render Phase에서 작업 중인 workInProgress 트리(동일한 fiber 노드로 구성됨)→ workInProgress 트리가 Commit Phase를 지나면 current 트리로 관리(할당)된다더블 버퍼링 형태이기 때문에 리액트는 작업 우선순위에 맞게 유연하게 대처 가능ex) workInProgress에 작업하다가 버리고 처음부터 다시시작 or 중지시켰다가 다시시작 workInProgress 는 current에서 자기 복제하여 alternate 로 참조하는 방식으로 만들어진다.VDOM 노드는 자식을 child로 참조하는데 first child만 참조, 나머지 자식들은 이전 형제가 s..

• format_list_bulleted FE/React
• · 2025. 4. 14.
• textsms

[React 까보기] 1. 리액트 패키지의 구성 요소들 & 용어 정의

1️⃣ 구성 요소react 코어컴포넌트 정의다른 패키지에 의존성 X, 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능rendererreact-dom, react-native-renderer 호스트(브라우저 or 모바일) 렌더링 환경에 의존호스트와 react를 연결 → 즉, 웹에서는 DOM 조작reconciler 와 lagacy-events 패키지 에 의존event(legacy-event)(아래 레퍼런스 react 공식문서 링크 참고)SyntheticEvent 라는 이름의 내부적으로 개발된 이벤트 시스템기존 웹에서의 event를 wrapping 하여 추가적인 기능을 수행할 수 있게 함scheduler리액트는 Task를 비동기로 실행. 이 Task 를 실행하는 타이밍을 알고 있는 패키지ex) state..

• format_list_bulleted FE/React
• · 2025. 4. 14.
• textsms

실행 컨텍스트에 대해서 설명해주세요.

실행 컨텍스트에 대해서 설명해주세요.실행 컨텍스트란 코드가 실행되는 환경입니다. 자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기위해 존재합니다.실행 컨텍스트는 전역 실행 컨텍스트, 함수 실행 컨텍스트로 나뉩니다.전역 실행 컨텍스트는 자바스크립트가 처음 실행될때 생성되는 컨텍스트입니다. 이는 프로그램이 종료될 때까지 유지되며 전역에 선언된 변수나 함수가 모두 포함됩니다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근 가능합니다.자바스크립트는 싱글 스레드 이기 때문에 전역 실행 컨텍스트는 1개만 존재합니다.함수 실행 컨텍스트는 함수가 호출될 때 마다 생성되는 컨텍스트입니다. 각 함수는 자신만의 실행 컨텍스트를 가지며 이 컨텍스트 내에서 선언된 변수와..

• format_list_bulleted FE/면접 준비
• · 2025. 4. 2.
• textsms