[React] 리액트 버전 18

😭 Automatic Batching

• 앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생
• 유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생
• 이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭
• 배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음
• 리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨
• 기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐

• 리액트 버전 18에서 오토메틱 배칭이라는 것이 새롭게 등장하였고, 자동으로 여러 상태의 업데이트 작업을 묶어서 한 번에 처리

// 기존 버전
setTimeout(() => {
	setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    // 각 state의 업데이트마다 재렌더링 발생
}, 1000)

// 현재 버전
setTimeout(()=> {
	setCount((count) => count + 1);
    setIsFull((isFull) => !isFull);
    // 재렌더링이 마지막에 한 번만 발생
}, 1000);

• 먼저 기존 버전에서는 각 스테이트의 업데이트마다 재렌더링이 발생하게 됨
• setCount 함수가 호출되었을 때와 setIsFull 함수가 호출됐을 때 각각 재렌더링 발생
• 현재 버전인 버전 18에서는 이러한 상태 업데이트 작업을 자동으로 묶어서 한 번에 처리하는 것이 오토매틱 배칭이며 결과적으로 재렌더링이 한 번만 발생하게 됨

---

😭 Transitions

• 트렌지션은 리액트에서 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 새로운 개념
• 업데이트의 형태를 나누어 사용자에게 더 빠르고 좋은 사용자 경험을 제공하기 위함 
• 웹사이트의 입력 양식에 키보드로 글자를 입력했는데 글자기 느리게 입력되거나 몇 초가 지나서 입력된다면 사용자는 웹사이트에 오류가 있다고 판단할 수 있기 때문
• 리액트 버전 18에서는 업데이트의 종류를 나누고 긴급한 업데이트를 먼저 처리함으로써 사용자에게 더 나은 경험을 제공하도록 한 것

import {startTransition} from 'react';
// 긴급 업데이트: 입력한 글자를 화면에 보여주어야 함
setInputValue(input);

// 함수 내에 있는 모든 업데이트는 Transition 업데이트가 됨
startTransition(() => {
	// Transition 업데이트: 검색 결과를 보여주어야 함
    setSearchQuery(input);
});

• 리액트에서 제공하는 StartTransition이라는 함수를 사용해서 사용자로부터 한 번의 입력이 발생했을 때 업데이트를 나눠서 처리하는 코드
• 사용자의 입력을 보여주는 것은 긴급하게 처리되어야 할 업데이트이기 때문에 기존과 동일하게 상태 업데이트 진행
• 이후에 사용자 입력에 따른 결과를 보여주는 것은 아주 긴급하게 처리하지는 않아도 되는 부분이기 때문에 StartTransition 함수를 사용해서 TransitionUpdate로 처리
• Transition 업데이트는 긴급하지 않은 것으로 처리되기 때문에 그 사이에 더 긴급한 업데이트가 들어오면 중단

😭 업데이트의 종류

• 긴급한 업데이트
  • 사용자와 직접적인 인터랙션이 일어나는 경우
  • 예) 글자 입력, 버튼 클릭 등
• 긴급하지 않은 업데이트
  • 사용자와 직접적인 인터랙션이 일어나지 않는 경우
  • 예) 서버로부터 결과를 받아와서 보여주는 경우

---

😭 Suspense

• React로 컴포넌트를 작성하다 보면 웹사이트의 규모가 커지면서 컴포넌트의 사이즈도 커지게 됨
• 웹브라우저에서 이런 큰 컴포넌트를 한 번에 로딩하려고 하면 시간이 오래 걸리는 문제가 있음
• 2018년 리액트 버전 16.6이 릴리즈될 때 처음 등장한 컴포넌트
• 역할은 하위 컴포넌트(children)가 준비되기 전까지 렌더링을 중단하는 것
• 하위 컴포넌트가 준비된 이후에 렌더링을 시킴으로써 사용자 경험을 향상시켜줄 수 있음

import {lazy, Suspense} from 'react';
import LoadingSpinner from './LoadingSpinner';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent(props) {
	return (
    	<Suspense fallback={<LoadingSpinner />}>
        	<OtherComponent />
        >/Suspense>
    );
}

export default MyComponent;

• Other 컴포넌트가 준비되기 전까지 Fallback 속성에 들어가있는 Loading Spinner라는 컴포넌트를 화면에 보여주고, Other 컴포넌트가  준비되면 그때 Other 컴포넌트를 화면에 보여주게 됨
• 기존의 Suspense는 이렇게 클라이언트에서 코드 스프리팅과 함께 제한적으로만 사용이었는데. React 버전 18에서는 Suspense를 서버 렌더링과 제한적으로 데이터 패칭에서도 사용할 수 있도록 업데이트 
• 앞으로 계속해서 발전한다고 하니 관심을 갖고 지켜보면 좋을 것 같다

😭 Code Splitting

• 개발자들은 이 문제를 해결하기 위해서 컴포넌트의 코드를 여러 조각으로 분리하는 코드 스피리팅이라는 기법을 적용
• 분리된 로직을 우리가 흔히 레이지 로딩 또는 다이나믹 로딩이라고 부르는 동적 로딩 기법을 적용하여 웹사이트의 반응 속도를 높일 수 있게 됨

---

😭 리액트 DOM 클라이언트

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render{
	<React.StrictMode>
    	<App />
    </React.StrictMode>
    document.getElementById('root')
);

• 기존에는 클라이언트에서 렌더링을 위해서 다음과 같은 형태로 react-dom.render 함수 사용

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StricMode>
    	<App />
    </React.StricMode>
);

•  리액트 버전 18에서는 react-dom/client라는 패키지가 새롭게 추가되었고, create-root 함수를 사용하여 렌더링을 하게 됨
• 하위 호환성 때문에 기존 방식도 여전히 지원하지만 새로운 API를 사용하지 않으면 리액트 버전 18에 새로운 기능들을 사용할 수 없음
• 클라이언트에서 렌더링을 위해서는 createRoot를 사용

😭 리액트 DOM 서버

• renderToPipeableStream
  
  • NodeJS 환경에서 스트리밍을 위한 함수
• renderToReadableStream
  • Edge runtime 환경을 위한 함수

---

😭 Strict Mode

• 리액트의 Strict 모드는 개발 모드일 때 잠재적인 버그를 찾을 수 있게 해주는 모드
• 리액트 버전18에서는 Strict 모드의 동자기 변경되었는데, 개발 모드에서 Strict 모드를 사용하게 되면 컴포넌트를 언마운트 시켰다가 다시 한 번 마운트 시킴
• 컴포넌트의 생명 주기 함수들이 예상과 다르게 여러 번 호출될 수 있음

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StricMode>
    	<App />
    </React.StricMode>
);

• 클래스 컴포넌트의 경우 컴포넌트 디드 마운트가 한 번 호출된 다음 컴포넌트 윌업 마운트가 호출되고 이후 다시 컴포넌트 디드 마운트가 호출
•  이러한 점을 잘 인지히고 컴포넌트가 여러 번 마운트 되어도 문제가 생기지 않도록 개발하는 것이 중요

---

😭 useId() 훅

• 서버와 클라이언트에서 고유한 id 값을 생성하기 위한 훅
• 리스트를 렌더링할 때 맵 함수 내에서 반환하는 element의 key로 사용하는 용도는 아님

😭 useTransitions() 훅

• 앞에 트렌지션에서 다뤘던 긴급하지 않은 업데이트를 위한 훅
• 기본적으로 일반적인 상태 업데이트는 긴급한 업데이트로 처리되며, useTransitionHook이나 startTransition 함수를 사용하여 긴급하지 않은 업데이트를 모아서 처리할 수 있음

😭 useDeferredValue() 훅

• 긴급하지 않은 업데이트를 재렌더링하는 것을 연기할 수 있게 해주는 훅
• 짧은 시간에 한 가지 상태의 업데이트가 여러 번 발생하게 되면 최종 상태값만을 업데이트
• 보통 값이 튀는 것을 막는다는 의미로 디바운싱이라고 부르는데, useDeferredValue Hook이 하는 역할도 비슷하다고 보면 됨
• 지연된 렌더링은 중단 가능하며 사용자의 입력을 차단하지 않음

😭 useSyncExternalStore() 훅

• 외부 저장소를 구독할 수 있게 해주는 훅
• 외부 저장소를 React 컴포넌트의 State와 연동해서 사용하고 싶을 때 사용하게 됨
• 애플리케이션 코드가 이닌 라이브러리에서 사용하기 위한 것이기 때문에 입문자분들이 사용하는 일은 거의 없다고 보면 됨

😭 useInsertionEffect() 훅

• CSS in JS 라이브러리를 위한 훅
• 렌더링 과정에서 스타일 삽입의 성능 문제를 해결할 수 있게 해줌
• useInsertionEffect도 앞에 나온useSyncExternalStore과 마찬가지로 애플리케이션 코드가 아닌 CSS인 JS 라이브러리에서 사용하기 위한 것이기 때문에 일반적인 리액트 개발분이 사용하는 일은 거의 없음

 

공부한 강의 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런