라이브러리에서 사용하기 위한 훅이다.

[Yu-Na Lee]

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

React Lifecycle은 말 그대로 생명주기를 말한다. 어떠한 상태가 생성되고 소멸되기 까지를 말하는데, 크게는 세가지 단계가 있다.
1) 생성 단계(mount): 구성요서가 화면에 추가될 때, 마운트 된다.
2) 업데이트 단계(update): 구성요소가 상호작용하면서 새 속성이나 상태를 받아 갱신된다.
3) 소멸 단계(unmount): 화면에서 제거될 때 마운트가 해제된다.

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

1) Automatic Batching : 불필요한 리렌더링 처리를 막기 위해, 여러개의 상태를 업데이트 할 경우 그룹화하여 한 번에 업데이트 하도록 변경되었다.
2) Transitions: 업데이트 측면에서 사용자와 상호작용되는 업데이트와 그렇지 않은 업데이트를 모두 수행하도록 한다. useTransition 훅은 보류 중인 상태를 추적하여 전환을 시작하는 훅이고, startTransition는 훅을 사용할 수 없을 때 전환하기 위해 사용하는 메서드이다.
3) Suspense: 아직 구성요소 트리의 일부가 표시되지 않은 경우에 로드 상태를 선언적으로 지정할 수 있다. 그리고 동시 렌더링 기능을 사용하여 기능을 확장했다. 전환 중 일시중단 할 경우에 폴백되는 것을 방지한다.
4) React DOM Client: 
	a) createRoot: ReactDOM.render 대신 사용
	b) hydrateRoot: 서버사이드랜더링(SSR)을 hydrate하기 위한 메소드, ReactDOM.hydrate 대신 사용
5) React DOM Server: 
	a) renderToPipeableStream: 노드 환경에서 스트리밍 가능, Suspense와 함께 사용 가능하다.
	b) renderToReadableStream: Cloudfare, Demo 작업자의 최신 엣지 런타임 환경에서 스트리밍 가능, renderToString이 여전히 존재하나, 권장하지 않는다.
6) Strict Mode: 개발 전용 검사를 도입, 처음 마운트 될 때마다 모든 구성요소를 자동으로 마운트 해제하고 다시 마운트하여 이전 상태를 복원

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

1) useId: 서버와 클라이언트에 고유ID를 생성해주는 훅
2) useTransition: 새로 업데이트된 기능인 Transitions를 사용하기 위한 훅
3) useDeferredValue: 트리의 급하지 않은 부분이 다시 렌더링 되는 것을 지연시키기 위한 훅, 고정된 시간 지연이 없음
4) useSyncExternalStore: 업데이트를 강제로 동기화하여 외부 저장소가 동시 읽기를 지원할 수 있는 새로운 훅, 외부 데이터를 읽어들어올 때, useEffect가 불필요하다. 
5) useInsertionEffect: CSS-in JS 라이브러리 사용시 있던 문제를 해결하는 훅, 새 레이아웃을 읽기 전 실행된다.

(useSyncExternalStore와 useInsertionEffet는 라이브러리에서 사용하기 위한 훅이다.)

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

: 글 쓰는 능력 향상, 부지런한 P의 좋은 습관 만들기, 프론트엔드가 ai를 잘 활용하려면?