React18에서 업데이트 된 기능에 대해 설명해주세요
새로운 hooks의 추가를 제외하고 가장 큰 변화는 바로 동시성이라는 개념의 추가이며, 이로 인해 일어나는 메이저한 변화는 크게 3가지 정도로 축약할 수 있다.
Automatic Batching (자동 배치)
React 18에는 컴포넌트 업데이트시 배칭을 자동으로 처리하는 오토매틱 배칭이 있다.
- 배칭이란?
React 업데이트는 기본적으로 state나 props의 변경이 발생할 때마다 업데이트를 수행하는데, 이때 최적화를 위해 업데이트 사항들을 모아서 한번에 실행해주는 기능이다.
원래는 수동배칭, 즉 유저가 하나의 콜백이나 이벤트리스너 같은 것들 안에 state들을 묶어두어야만 배칭 기능을 사용할 수 있었는데 18버전에서 도입된 이 오토매틱 배칭이 있으면 더이상 개발자가 이에 큰 신경을 쓰지 않아도 자동으로 최적화를 시켜주게 되는 것이다.
동시성이란 개념과 함께 업데이트된 이 기능은 더이상 state의 기원에 대해 따지지 않고 리렌더링을 발생시킬만한 모든 변경을 묶어서 처리해준다.
Concurrent Rendering Improvements (동시 렌더링 개선)
React 18에서는 동시성이라는 개념에 맞게 Suspense 기능이 더욱 진화해서 돌아왔다.
기존 동기적이었던 업데이트 방식을 개선하여, 이제 React 업데이트들을 컴포넌트 단위로 분할하고 병렬적으로=비동기적으로 처리할 수 있게 되면서 앱의 응답속도나 사용성이 크게 개선되었다.
Transitions
트랜지션은 동시성을 지원하고 긴급 업데이트와 그냥 업데이트를 구분하기 위해 등장한 React의 새로운 개념이다.
긴급 업데이트(Urgent updates) : 직접적인 상호 작용을 반영하기 위한 업데이트(타이핑, 오버, 스크롤링 등 유저가 즉각적인 피드백을 원하는 것들)
전환 업데이트(Transition updates) : 하나의 뷰에서 다른 뷰로 UI를 변경하는 등의 급하지 않은 업데이트(페이지 전환 등 유저가 기다려야 한다고 일반적으로 생각하는 것들)
트랜지션을 지원하는 useTransition 훅을 사용하여 개발자는 렌더링을 좀더 세밀하게 최적화 할 수 있게 되었다.
Server Components
React 18에서 만들어진 서버 컴포넌트는 기존 클라이언트 컴포넌트와 달리 브라우저에서 실행되지 않고, 서버에서 렌더링시킬 수가 있다.
이는 개선된 성능과 빠른 로딩속도에 더불어, 서버 리소스에 바로 접근하기 때문에 Data Prefetching, Pre-rendering, 검색 엔진 최적화 등 ssr가 가진 장점들이 같이 따라와준다.
예제와 더불어 자세한 원리 설명이 잘 나와있는 블로그.
React18에서 추가된 hook들에 대해 설명해주세요
useId
하이드레이션시에도 미스매치를 피할수 있는, 유니크한 id값을 생성해주는 hook.
리액트의 서버컴포넌트 = SSR(Server Side Rendering) 를 지원하기 위해 나왔다.
-
하이드레이션이란?
클라이언트 측에서 React 애플리케이션을 렌더링할 때, 서버에서 보내는 HTML과 동일한 컴포넌트 트리를 생성하기 위해 사용하는 기술.
서버 측에서 생성된 HTML과 클라이언트 측에서 생성되는 JavaScript를 이용해 초기 상태를 동기화하는 과정이다. -
미스매치란?
하이드레이션 시에 서버 측에서 생성한 HTML에서 사용한 ID와 클라이언트 측에서 생성하는 ID가 다를 경우, 상태의 불일치로 인해 예기치 않은 동작이 발생할 수 있는데 이를 미스매치라고 한다.
예를 들어, 클라이언트 측에서 생성한 ID가 서버 측에서 생성한 HTML에 사용된 ID와 일치하지 않으면, 해당 ID를 가진 요소를 찾을 수 없다는 오류가 난다던지...
useId는 이러한 상황을 방지하기 위해 서버와 클라이언트 간 일관된 ID를 생성해주는 훅이다. 이렇게 하면 양쪽의 아이디가 일치하므로 하이드레이션 과정에서 예기치 않은 오류가 발생하는 것을 방지할 수 있다.
알고리즘은 여기에서 볼 수 있다.
useTransition
트랜지션을 수동배치할 수 있게 만든 훅.
일부 상태 업데이트를 긴급하지 않은 것으로 간주해 관리가 가능하다.
React 상태 값의 변화는 기본적으로 전부 긴급 업데이트이지만 업데이트가 급하지 않은 일부 상태가 업데이트 되는 것을 막아서 렌더링을 최적화 할 수 있는 Hook이다.
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 })useState처럼 다음과 같은 형태로 사용할 수 있으며
각 항목은 다음을 나타낸다.
- startTransition : 어떤 상태변화를 지연하고 싶은지 지정할 수 있는 함수
- isPending : 진행 여부를 나타내는 값, 트랜지션이 진행중인지 알 수 있다.
- timeoutMs : 최대 n초간 이전 화면을 유지하는 딜레이타임.
useDeferredValue
DOM 트리에서 급하지 않은 부분의 리렌더링을 지연시키기 위한 훅. useTransition과 다른 부분은 사용법이 useState보다 useDebounce에 가깝다는 것이다.
- useTransiton : 비동기 작업이 끝날때까지 이전화면을 유지하거나, 로딩을 시각적으로 보여줄 수 있음(선택)
- useDeferredValue : 비동기 작업의 결과를 표시하기 전에 일정 시간동안 이전 ui의 상태를 유지함으로써 부드러운 전환이 가능하게 해줌
const deferredSearchQuery = useDeferredValue(searchQuery, { timeoutMs: 3000 });
이렇게 사용하면 된다. 첫번째 인자인 value값은 매 렌더링마다 두번째 인자에 있는 옵션에 따라 딜레이된다.
useSyncExternalStore
외부 스토어에 대한 업데이트를 강제로 동기화해주는, 동시성을 위한 useEffect 훅이다.
동시성 업데이트로 렌더링이 렌더링을 잠시 일시중지할 수 있게 되면서 잠재적인 문제가 생겼는데, 어떠한 컴포넌트의 업데이트 일시중지가 발생한 시점에서도 여전히 외부스토어에서 렌더링에 사용되는 데이터와 이와 관련된 변경사항을 가져와 버릴수 있게 되어버린 것이다.
이렇게 되면 지연되었던 업데이트가 가진 옛날 데이터와 렌더링동안 외부스토어에서 받아온 새로운 데이터가 일치하지 않아 오류가 발생해버린다.
그걸 막고 값을 단일화해주는 훅이다.
리액트 외부에서 값을 가져오는 라이브러리를 사용한다면 해당 문제가 발생할 수 있으니 체크해두자.
useInsertionEffect
CSS-in-JS 라이브러리를 사용할 경우,
렌더링 도중에 스타일을 바꿔줄때 발생하는 성능 문제를 해결할 수 있는 훅이다.
DOM이 변경되고 나서 레이아웃을 변경하기 전에 실행이 되는 느낌으로 useLayoutEffect와 비슷한 역할을 한다.
요즘 관심있는 주제가 있다면 알려주세요
- 챗GPT
- GraphQL
- Serverside Rendering
- Next.js
등이 있습니다.
