Fiber

• Fiber는 왜 생겨났는가?
  • 들어간 순서와 상관 없이 꺼낼 수 있다.
• React에서 꺼낸다 ? ⇒ Rendering, DOM에 변화를 적용한다
  • 꺼내는 순서가 고정되어 있다? ⇒ 렌더링 순서가 정해져 있다.
• 렌더링 순서를 유동적으로 선택하기 위해 Stack에서 Fiber 아키텍쳐로 변화
• 리액트 18v에서부터 본격적으로 사용되기 시작 - useTransition

useState

• setState로 값을 바꾸면 해당 값의 state는 어떻게 변화하는가?

리액트 패키지의 구성 요소들

• react, shared, reconciler, scheduler, renderer
  • hook → scheduler → reconciler

리액트 패키지의 구성요소, 용어 정의

구성 요소

• React 코어
  • component 정의
  • 다른 패키지에 의존성이 없음 ⇒ 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능
• Renderer
  • react-dom, react-native-renderer 등 호스트(브라우저, 모바일) 렌더링 환경에 의존
  • 호스트(브라우저, 모바일 등)와 react를 연결, 즉 웹에서는 DOM 조작
  • reconciler와 legacy-events 패키지 의존성
• Event(legacy-events)
  • 기존 웹에서의 event를 wrapping, 추가적인 기능을 수행할 수 있게 함
  • SyntheticEvent라는 이름으로 개발
• scheduler
  • React는 Task를 비동기로 실행함
    • useState에서 setState를 호출했을 때, state를 호출하면 이전 state값이 콘솔에 찍힘
    • Task를 실행 타이밍을 결정하는 것을 scheduler가 함
• reconciler
  • Fiber Architecture에서 VDOM 재조정 담당
  • 컴포넌트를 호출하는 곳

용어