[Javascript] this 복습

this 개념- 자신이 속한 객체, 자신이 생성할 인스턴스를 가리키는 식별자 (자기 참조 변수)- this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.- 자바스크립트 엔진이 암묵적으로 생성함 호출 방식에 따른 this 바인딩1. 객체 리터럴 → 메서드를 호출한 객체를 가리킨다const circle = { radius: 5, getDiameter() { return 2 * this.radius; }}console.log(circle.getDiameyer()); // 10 2. 생성자 함수 → 생성자 함수가 생성할 인스턴스를 가리킨다function Circle(radius) { this.radius = radius;}Circle.prototype.getDiameter = function(..

• format_list_bulleted FE/Javascript
• · 2025. 8. 4.
• textsms

[Javascript] 프로토타입 복습

프로토타입 개념- 자바스크립트는 프로토타입을 기반으로 상속을 구현 -> 코드 재사용에 용이- 생성자 함수는 동일한 프로퍼티(메서드 포함) 구조를 갖는 객체를 여러 개 생성할 때 유용- 생성자 함수에서 this로 할당된 프로퍼티,메서드는 인스턴스가 생성될때 할당된다.// 아래 Circle 생성자 함수의 getArea는 모든 인스턴스가 가지는 메서드 이므로 메모리 낭비가 됨function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }}// 프로토타입을 이용한 getArea 중복 제거// 모든 인스턴스는 getArea 메서드를 공유함function Circle..

• format_list_bulleted FE/Javascript
• · 2025. 7. 29.
• textsms

[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