[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

[BOJ] 1026번 - 보물

🔥 접근직관적으로 A의 가장 수를 B의 큰 수의 인덱스에 위치시키는 방법으로 그리디 알고리즘을 적용한다결국 최솟값만 구하면 되는 문제이므로 A의 위치를 재배열해서 대응시키나, A와 B를 각각 오름차순, 내림차순으로 정렬하여 계산하나 답은 똑같이 나올 것 0~N 까지 반복문을 돌려 ASort와 BSort의 인덱스를 각각 곱하고 누적합 처리하여 답 도출🧑‍💻 코드const fs = require('fs');const filePath = process.platform === 'linux' ? '/dev/stdin' : 'input.txt';const input = fs.readFileSync(filePath, 'utf8').toString().trim().split('\n');const N = Numbe..

• format_list_bulleted 알고리즘/백준
• · 2025. 4. 10.
• textsms