원티드 프리온보딩 프론트엔드 챌린지 4월 사전과제

[Seoyeon]

1. React Lifecycle에 대해 간단히 설명해주세요

생성 - 갱신 - 소멸의 단계로 나타난다.

• Mount ( 생성 )
  DOM이 생성되고 웹 브라우저에 나타나는 단계이다.
• Update ( 갱신 )
  컴포넌트가 업데이트 되는 단계이다.
• Unmount ( 소멸 )
  컴포넌트를 DOM에서 제거하는 단계이다.

2. React18에서 업데이트 된 기능에 대해 설명해주세요

• Automatic Batching ( 자동 배치 )
  배치란 리액트가 더 나은 성능을 위하여 여러개의 상태 업데이트를 한번의 리렌더링으로 묶는 작업이다.
  기존 배치 작업은 배치 작업은 React 이벤트 핸들러 내에서만 수행되므로, Promise 내부의 업데이트, setTimeout, 기본 이벤트 핸들러 또는 기타 이벤트에서는 처리되지 않았다.
  자동 배치는 일반적인 리액트 이벤트 핸들러 함수 스코프에서 상태 업데이트가 일어나지 않더라도 자동으로 배치를 적용해준다.

• Transitions(전환)
  전환은 긴급 업데이트와 긴급하지 않은(전환) 업데이트를 구분하기 위한 React의 새로운 개념이다.
  긴급 업데이트는 타이핑이나 스크롤처럼 직접적인 상호작용이 즉시 반영되는 영역이고 전환 업데이트는 하나의 뷰에서 다른 뷰로의 UI가 전환되는 영역이다. 긴급 업데이트와 달리 전환 업데이트는 화면에 즉시 나타나는 걸 기대하지 않는다.
  React 18부터는 startTransitionAPI를 제공함으로써 전환 업데이트를 명시적으로 구분하여 상태 업데이트를 진행할 수 있게 되었다.

3. React18에서 추가된 hook들에 대해 설명해주세요

• useId
  클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있다.

• useTransition, startTransition
  이 두 개의 훅을 사용하여 일부 상태 업데이트를 긴급하지 않은 것(not urgent)로 표시할 수 있다.

• useDeferredValue
  트리에서 급하지 않은 부분의 재렌더링을 지연할 수 있다.

• useSyncExternalStore
  스토어에 대한 업데이트를 강제로 동기화하여 외부 스토어가 concurrent read를 지원할 수 있도록 한다.

• useInsertionEffect
  css-in-js 라이브러리가 렌더링 도중에 스타일을 삽입할 때 성능 문제를 해결할 수 있다.

4. 요즘 관심있는 주제가 있다면 알려주세요

타입스크립트에 관심이 있습니다.
프론트엔드의 개발 동향