ebbll commented 1 year ago

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

(1) 생명주기(React Lifecycle)란?

리액트 컴포넌트의 생명주기 단계는 아래와 같습니다

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때(마운트)
컴포넌트의 props 또는 state가 변경되어 컴포넌트가 다시 렌더링될 때(업데이트)
컴포넌트가 DOM에서 마운트 해제(제거)될 때(언마운트)

(2) 컴포넌트 생명주기(React Component Lifecycle Method)

생명주기 메서드는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능입니다. 모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.

출처 - 리액트 공식문서의 리액트 컴포넌트 생명주기 도표

대표적인 리액트 컴포넌트 생명주기 메소드를 정리해 보았습니다.

마운트

constructor()
render()
componentDidMount()

업데이트

shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

마운트 해제

componentWillUnmount()

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

React v18은 이전 버전에서 자잘한 마이너 업데이트 없이 메이저 기능들이 한 번에 많이 추가되었다고 하네요. 새로이 추가된 기능은 아래와 같습니다

Automatic batching(자동 배치) React 일괄 업데이트 방식을 변경하여 더 많은 일괄 처리를 자동으로 수행하는 성능 개선 방식이 도입되었습니다.
Stricter Strict Mode(더욱 엄격해진 Strict Mode) React는 컴포넌트가 마운트 해제되는 사이간의 state를 보존할 수 있는 기능을 추후 제공할 예정이며, 이에 대비하기 위해 이번 릴리스에서 Strict Mode에 대한 새로운 개발 전용 검사를 도입했습니다. React는 컴포넌트가 처음으로 마운트될 때마다 모든 컴포넌트를 자동으로 마운트 해제하고 다시 마운트하여, 그 다음 마운트에서 이전 state를 복원합니다. 이로 인해 앱이 중단되는 경우, 컴포넌트가 기존 state로 다시 리마운트 할 수 있도록 수정할 수 있을 때까지 Strict Mode를 해제하는 것이 좋습니다.
Consistent useEffect timing(일관된 useEffect timing) 별개의 사용자 입력 이벤트(click 또는 keydown 등) 중에 업데이트가 트리거된 경우 항상 동기적으로 effect 함수를 flush 합니다. 이전 버전에서는 동작이 항상 예측 가능하거나 일관적이지 않았던 점이 개선되었습니다.
Stricter hydration errors(더욱 엄격해진 Hydration Errors) 누락되거나 추가된 text content로 인한 Hydration 불일치가 이제 경고가 아닌 오류로 처리됩니다. Hydrate 된 tree의 일관성이 보장되며, Hydration 불일치로 인해 발생할 수 있는 잠재적인 개인 정보 보호 및 보안의 허점을 방지할 수 있습니다.
Suspense trees are always consistent(항상 일관된 Suspense Tree) 컴포넌트가 tree에 완전히 추가되기 전에 중단되면 React는 이를 불완전한 state인 채로 tree에 추가하거나 effect를 발생시키지 않습니다. 대신 React는 새 tree를 완전히 버리고 비동기 작업이 완료될 때까지 기다린 다음 렌더링을 처음부터 다시 시도합니다. React는 브라우저를 block하지 않으면서 동시에 재시도를 렌더링합니다.
Layout Effects with Suspense(Suspense를 통한 Layout Effects) tree가 다시 re-suspend 되고 fallback으로 되돌아갈 때, React는 레이아웃 효과를 정리한 다음, 바운더리 내부의 content가 다시 표시될 때 재생성하도록 변경되었습니다. 이렇게 하면 Suspense와 함께 사용할 때 컴포넌트 라이브러리가 레이아웃을 올바르게 측정하지 못했던 문제가 수정됩니다.
New JS Environment Requirements(새로운 JS 환경에 따른 요구사항 반영) 이제 React는 Promise, Symbol 및 Object.assign을 비롯한 최신 브라우저 기능에 의존합니다. 기본적으로 최신 브라우저 기능을 제공하지 않거나 호환되지 않는 구현이 있는 Internet Explorer와 같은 이전 브라우저 및 장치를 지원하는 경우, 번들 애플리케이션에 전역 polyfill을 포함하는 것이 좋습니다.

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

useId는 hydration 불일치를 피하면서 클라이언트와 서버 모두에서 unique한 ID를 생성하기 위한 새로운 hook 입니다. unique한 ID가 필요한 접근성 API와 통합되는 컴포넌트 라이브러리에 유용하게 쓰입니다.
startTransition 및 useTransition을 사용하면 일부 state 업데이트를 긴급하지 않은 것으로 표시할 수 있습니다. 다른 state 업데이트는 기본적으로 긴급한 것으로 간주됩니다. React는 긴급하지 않은 state 업데이트(예: 검색 결과 목록 렌더링)를 중단하기 위해 긴급한 state 업데이트(예: 텍스트 입력 업데이트)를 허용합니다. - Transition과 관련된 새로운 hook
useDeferredValue를 사용하면 tree의 긴급하지 않은 부분을 다시 렌더링하는 것을 연기할 수 있습니다. 디바운싱(JS debouncing)과 비슷하지만 그에 비해 몇 가지 장점이 있습니다. 고정된 시간 지연이 없으므로 React는 첫 번째 렌더링이 화면에 반영된 직후 지연 렌더링을 시도합니다. 지연된 렌더링은 interrupt 가능하며 사용자 입력을 block하지 않습니다.
useSyncExternalStore는 저장소에 대한 업데이트를 강제로 동기화하여 외부 저장소가 동시 읽기를 지원할 수 있도록 하는 hook 입니다. 외부 데이터 소스에 대한 구독을 구현할 때 useEffect가 필요하지 않으며 React 외부의 상태와 통합되는 모든 라이브러리에 권장됩니다.
useInsertionEffect는 CSS-in-JS 라이브러리가 렌더링에 스타일을 삽입할 때의 성능을 개선하는 새로운 hook 입니다. 이 hook은 DOM이 변경된 후 실행되지만, 레이아웃 효과가 새 레이아웃을 읽기 전에 실행됩니다.

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

리액트 router로 구현할 수 있는 SPA(Single-Page Application)를 구현해 보고 싶습니다.

참고자료

hyoloui commented 1 year ago

라이프사이클 3,4번 같은 의미 아닌가요?