React
리엑트 스터디(JSX, React Fiber)
JSX의 정의와 변환 원리, 가상 DOM의 탄생 배경, 그리고 리액트 파이버 아키텍처를 살펴봤어요.
한 번의 결과보다, 그 결과에 도달한 과정을 기록합니다.
모든 기록
목록으로 돌아가기
JSX는 트리구조로 표현하고 싶은 것을 JS로 쉽게 변환시키게 하기 위한 확장된 문법 구조라고 생각하면 좋아요.
JSXElement
JSXElementName
:로 묶을 수 있으며 1개만 묶을 수 있어요..로 묶을 수 있으며 여러 개가 사용 가능하고, JSXNamespacedName과 이어서 사용은 불가능해요.JSXAttributes
“, ‘ 로 구성된 문자열, { AssignmentExpression }JSXChildren
부모와 자식간의 관계를 만들어주는 가장 핵심적인 요소
{, <, > ,} 를 제외한 문법JSXString
\ 의 처리 유무인데, 이는 JS로 동작해요.)HTML download, CSS, JS 다운로드 → 파싱이후 DOM, CSOOM생성 → 눈으로 보이는 부분 순회 → CSS를 대입 → layout, reflow → painting
레이아웃 → repainting일 이러나 브라우저가 많은 소모를 사용하게 돼요. 그래서 매번 그려주는 것보다 VDOM으로 미리 변할 것을 계산하고 이를 DOM으로 대입해주는 거예요.
리엑트 파이버는 다음과 같은 일을 해요.
그렇다면 여기서 질문. JS는 single core 기반의 event loop인데(즉, 중단가능성이 없음) 어떻게 쪼개서 할 수 있을까요?
리엑트 파이버 트리
그래픽 쪽에서 사용하는 더블 버퍼링이라는 기술을 활용해요. 이는 다 그리지 못한 모습을 노출하지 않게 하기 위한 방식으로 current를 기준으로 workInProgress 트리를 그리게 돼요.
파이버의 작업 순서
beginWork() 함수를 실행해 파이버 작업을 수행, 자식이 없는 파이버를 만날 때까지 트리 형식으로 시작돼요.completeWork() 함수를 실행해 파이버 작업을 완료가상 돔은 웹에서만 통용되는 개념이고, 파이버는 그래도 RN에서도 같이 돼요. 즉 메커니즘이 리엑트의 핵심이에요.