React Three Fiber 프로젝트 구축

Fast campus의 광고 메일을 보다가 알게된 기술이 하나 있는데 React Three Fiber(R3F)라는 라이브러리이다.
R3F는 three.js를 위한 React 렌더러이다. Three.js의 모든 기능을 React 환경에서 쉽게 사용할 수 있게 해준다.
19년도에 처음 major 버전을 release 한 것으로 보아 나온지는 꽤 되었는데 그동안 모르고 있었다.

React Three Fiber - introduction (링크)

공식문서를 가보면 좌측 상단 로고 자리에 Pmndrs.docs가 보인다.
React Three Fiber, React Spring, Drei, Zustand, Jotai 등등 다양한 라이브러리를 개발한 오픈 소스 개발자 집단인 Poimandres 가 만든 것임을 알 수 있다.

R3F의 핵심 특징은 다음과 같다.

• Three.js 기능 통합 : 모든 three.js의 기능을 지원한다.
• 효율적인 렌더링 : 추가 오버헤드 없이 React 외부에서 컴포넌트를 렌더링하여 빠르고 효율적인 3D 렌더링을 제공한다.
• JSX를 사용하여 three.js를 직관적으로 표현한다.
• three.js의 새로운 업데이트가 있을 경우, 이 라이브러리의 업데이트에 의존하지 않고 즉시 사용할 수 있다.

여기서 주목할 내용은 '추가 오버헤드 없이 React 외부에서 컴포넌트를 렌더링한다'이다.

위 문장을 좀 더 풀어보자면 다음과 같다.
웹에서 복잡한 3D 그래픽을 그리려면 CPU나 GPU와 같은 컴퓨터 자원을 사용하고 복잡하면 복잡할수록 자원 사용량 및 시간이 필요하다.
R3F는 React의 렌더링 방식(가상DOM) 및 렌더링 사이클 밖에서 3D 컴포넌트를 렌더링함으로써 3D 그래픽 렌더링에 필요한 자원을 더 적게 사용하고 더 빠르게 렌더링을 할 수 있도록 도와준다.

가상DOM이란? 가상 DOM(Virtual DOM)은 실제 화면에 보여지는 DOM의 복사본이며, React는 변경사항이 생길 때 먼저 가상 DOM에 적용한 후, 이를 실제 DOM에 업데이트합니다. 이 방식으로 브라우저의 렌더링 작업을 최적화하고, 애플리케이션의 성능을 향상시키는 데 도움이 됩니다.

Next.js와 함께 R3F 프로젝트 구축하기

요즘에 react로 개발한다고 하면 next.js는 이제 필수이다. pmndrs는 R3F를 next.js 환경에서 사용할 수 있도록 하는 starter를 제공한다.

아래 명령어로 next.js & R3F 프로젝트를 생성하자

yarn create r3f-app next my-app -ts

이 스타터를 통해 프로젝트를 구축하면 다음과 같은 내용이 세팅되어 있다.

• GLSL imports : GLSL(OpenGL shading Language)는 3D 그래픽을 렌더링 할 때 사용되는 쉐이딩 언어이다. GLSL imports는 이 언어를 프로젝트에 가져오는 기능을 말한다.
• Canvas is not getting unmounted while navigating between pages : 페이지를 이동할 때 Canvas가 언마운트되지 않는다. 그래서 이전 상태를 계속 유지할 수 있다는 장점이 있다. 하지만 불필요한 자원을 계속 사용하는 상황으로 볼 수도 있기 때문에 메모리 누수와 같은 문제가 발생할 수 있다.
• Canvas Components in Any Div : Canvas 컴포넌트를 페이지의 어떤 div에도 사용할 수 있게 해준다. 이는 레이아웃의 유연성을 제공한다.
• App directory Architecture : Next13에서 제공하는 App directory 방식을 지원한다.
• PWA support : Progressive Web App 기능을 지원한다.

프로젝트를 설치하고 yarn dev를 실행하고 브라우저에서 localhost:3000으로 이동했을 경우 다음과 같은 화면이 보인다면 성공적으로 프로젝트를 구축한 것이다.

다음 시간에는 첫 씬을 만들어보고 youtuebe에 있는 R3F 강의를 따라해보면서 차근차근 하나씩 알아가보자!