React 18 버전 업그레이드 처리

React 18 로 버전을 올리는 것에 대한 내용은 공식 문서에 잘 나와있다.

그런데 문서를 따라서 작업을 하다보면 몇가지 처리가 필요한 사항이 있어서 정리해두려고 한다.

createRoot

React 18 에서 바꿔줘야 하는 부분 중의 한 축은 render 방식이다. container 에 render 를 하는 방식이 아니라 root 를 먼저 만들고 root 의 render 를 사용해서 렌더링한다.

이 때 createRoot 는 한번만 일어나야 한다. 경우에 따라 렌더를 여러번 진행하는 코드가 만들어질 수 있는데 이때마다 createRoot 를 호출하게 되면 리액트가 싫어한다.

상황에 따라 여러번 직접 렌더를 호출해야하는 등의 상황이라면 root 를 따로 빼두고 한번 만든 root 를 계속 사용할 수 있게 해줘야 한다.

나의 경우에는 아직 클래스 컴포넌트가 있어서 이 경우에 루트를 메서드에서 매번 만들지 않고 한번 만든 root 를 재사용할 수 있도록 하는 작업이 필요했다.

class SomeComponent {
  private root: Root;

  render() {
    if (!this.root) {
      this.root = createRoot('some container');
    }

    this.root.render( ... )
  }
}

unmount

createRoot 로 만든 root 에는 unmount 를 지원한다.

이 때 createRoot 로 만든 root 는 unmountComponentAtNode 를 지원하지 않는다. root.unmount 를 사용해 언마운트 해줘야 한다.

언마운트 하는 함수를 만들어서 노드를 찾아서 언마운트 하는 로직이 있다면 이제 노드가 아니라 root 를 알 수 있도록 수정이 필요하다.

// before
const umount = () => {
  const someNode = document.getElementById('someNode');
  unmountComponentAtNode(someNode);
}

// after
const umount = (root: Root) => {
  root.unmount();
}

flushSync

가끔 작업을 독립적으로 처리하는 걸 보장하고자 setTimeout 같은 비동기 로직을 태워야 하는 경우가 있다.

React 18 에서는 배칭 처리가 추가되었기 때문에 setTimeout 과 같은 로직도 한번에 묶어서 처리하게 된다.

그렇기 때문에 특별히 따로 동작해야 하는 경우가 있다면 flushSync 를 사용해서 배칭 처리를 피해 동작의 독립적인 실행을 보장해줄 필요가 있다.