53, 54 React와 React Three Fiber

React와 React Three Fiber(R3F) 개요

1. 개요

지금까지는 Three.js를 순수 JavaScript 환경에서 사용하여 웹 애플리케이션을 만들었습니다. 그러나 실제 개발에서는 React와 같은 프레임워크 환경에 Three.js를 통합해야 하는 경우가 많습니다.
React는 초기 진입 장벽이 있지만, 구조적 개발과 상태 관리 측면에서 Three.js 프로젝트를 훨씬 효율적으로 만들 수 있습니다.

---

2. React란?

React는 UI(User Interface) 생성을 위한 라이브러리입니다. JSX라는 HTML과 유사한 태그 기반 언어를 사용해 UI를 작성하며, 데이터가 변경되면 UI가 자동으로 갱신됩니다(데이터 바인딩).

React의 특징

• JSX 사용: HTML과 유사한 문법을 사용해 UI를 작성
• 데이터 바인딩: 상태(state)가 변경되면 UI 자동 업데이트
• 구조적 개발: 컴포넌트 단위로 코드 재사용 및 관리
• 툴링 지원: 상태 관리, 라우팅, 빌드 최적화 등의 생태계 보유
• 멀티 플랫폼: 웹뿐만 아니라 모바일(React Native) 등 다양한 플랫폼 개발 가능

Vue.js, Svelte 등 대안도 있지만 Three.js와의 통합성은 React가 더 뛰어남.

---

3. React의 단점

• 학습 곡선: 진입 장벽이 존재하며 숙련까지 시간이 필요
• 버전 변화: 안정적이지만 유지보수 중이므로 API 변화 가능성 존재
• 디버깅 난이도: 추상화로 인해 버그 원인 파악이 어려울 수 있음

---

4. React Three Fiber (R3F)

R3F는 React에서 Three.js를 다루기 위한 React Renderer입니다.
JSX로 Three.js 씬(Scene)을 선언적으로 작성할 수 있고, 초기 설정과 반복적인 보일러플레이트 코드를 줄여줍니다.

특징

• JSX 기반 Scene 구성: <mesh> <ambientLight> 등 HTML 태그처럼 Three.js 객체를 작성
• React 생태계 통합: 상태 관리, 훅(Hook), 컴포넌트화 가능
• 기본 설정 자동화: 카메라, 렌더러 등 기본 옵션 자동 적용
• 성능 최적화 내장: 필요할 때만 렌더링, 메모리 관리 향상

R3F의 안정성

• 2019년 출시, 꾸준한 개선
• 2022년 8버전 이후 안정화, 문법/구조 변화 적음

---

5. 주요 참고 자료

• Github: pmndrs/react-three-fiber
• 공식 문서: docs.pmnd.rs/react-three-fiber
• 예제 모음: R3F Examples

---

6. R3F의 배경

창시자 Paul Henschel (0xca0a) 는 WebGL/Three.js 초창기 학습 난이도가 높아, React의 컴포넌트 공유 방식을 WebGL에 적용하고자 R3F를 개발했습니다.

“Three.js 학습은 어렵지만, 컴포넌트화를 통해 필요한 부분만 배우고, 나머지는 다른 사람들이 만든 기능을 가져다 쓸 수 있게 하자” — Paul Henschel

---

7. 앞으로 배우게 될 내용

1. First React Application – React 기초 학습
2. First R3F Application – R3F 설치 및 사용
3. Drei – 미리 제작된 R3F 유틸 컴포넌트 모음
4. Debug – R3F 전용 디버깅/모니터링 도구
5. Environment and Staging – 빛, 그림자, 환경맵 적용
6. Load a Model – 3D 모델 불러오기
7. 3D Text – 텍스트 렌더링
8. Portal – 포털 장면 구현
9. Mouse Events – Raycaster 없이 마우스/터치 이벤트 처리
10. Post-processing – 후처리 효과 간편 적용
11. Fun and simple portfolio – 간단한 포트폴리오 프로젝트
12. Physics with R3F – Rapier 물리엔진 적용
13. Create a game with R3F – 미니 게임 제작

---

💡 정리

• React는 UI를 동적으로 구성하는 데 특화된 라이브러리이며, R3F를 통해 Three.js를 React 문법으로 쉽게 다룰 수 있음.
• React의 상태 관리, 컴포넌트화, 데이터 바인딩 기능 덕분에 복잡한 Three.js 프로젝트도 효율적으로 구조화 가능.
• R3F는 학습 곡선을 줄이고, 반복 코드를 최소화하여 생산성을 높여줌.

---

React 기초와 R3F 준비 과정 정리

1. 개요

이 장에서는 Three.js를 잠시 내려놓고, React 기본기를 학습합니다.
React에 익숙하지 않더라도, 이후 React Three Fiber(R3F) 를 활용할 수 있도록 기초부터 실습까지 진행합니다.

---

2. React 프로젝트 생성 방법

2.1 Create React App (CRA) — Deprecated

npx create-react-app .
npm run start

• 장점: 초기 설정 없이 바로 실행 가능.
• 단점: 불필요한 파일 많음, 현재 공식적으로 deprecated.

---

2.2 From Scratch (수동 설정)

1. 프로젝트 초기화:

npm init -y

1. React 설치 (버전 명시):

npm install react@19 react-dom@19 react-scripts@5.0

1. package.json 스크립트 추가:

"scripts": {
  "dev": "react-scripts start",
  "build": "react-scripts build"
}

1. /public/index.html 작성:

<div id="root"></div>

1. /src/index.js 작성:

import { createRoot } from 'react-dom/client'
const root = createRoot(document.querySelector('#root'))
root.render(<h1>Hello React</h1>)

---

2.3 Vite 사용 (권장)

npm create vite@latest
# React + JavaScript 선택
npm install
npm run dev

• 장점: 빠른 빌드, HMR(Hot Module Reload) 안정적, 설정 간단.
• .jsx 확장자 지원.

---

3. JSX 문법 핵심

규칙 설명

최상위 요소 하나	JSX는 반드시 하나의 부모 요소를 가져야 함.
Fragment 사용 가능	<>...</> 사용 시 DOM에 실제 요소 생성 안 함.
태그 닫기 필수	<img />, <br />처럼 닫아야 함.
예약어 대체	class → className, for → htmlFor
JS 삽입	{ 변수명 }, { 1 + 1 }, { myFunc() } 가능
주석	{/* comment */}

---

4. 스타일 적용 방법

1. 인라인 스타일

<h1 style={{ color: 'coral', backgroundColor: 'floralwhite' }}>Hello</h1>

1. CSS 파일 import

.cute-paragraph { color: coral; }

import './style.css'
<p className="cute-paragraph">Text</p>

1. CSS 프레임워크 (예: TailwindCSS)

---

5. 컴포넌트(Component)

• App.jsx

export default function App() {
  return <h1>My Application</h1>
}

• 사용:

root.render(<App />)

• 재사용 가능, 분리된 로직 유지.

---

6. 상태 관리와 이벤트 — useState

import { useState } from 'react'

export default function Clicker() {
  const [count, setCount] = useState(0)
  const buttonClick = () => setCount(count + 1)

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={buttonClick}>Click me</button>
    </div>
  )
}

• state 변경 시 React가 리렌더링.
• setter 함수(setCount) 사용 시 React가 변경을 감지.

---

7. 생명주기와 useEffect

import { useEffect } from 'react'

useEffect(() => {
  console.log('컴포넌트 첫 렌더링 시 실행')
}, [])

useEffect(() => {
  console.log('count 변경 시 실행')
}, [count])

• 빈 배열 → 첫 렌더 시 한 번만 실행.
• 의존성 배열 → 특정 값 변경 시 실행.

---

8. 로컬 스토리지 연동

useEffect(() => {
  localStorage.setItem('count', count)
}, [count])

const [count, setCount] = useState(
  parseInt(localStorage.getItem('count') ?? 0)
)

• 초기값을 로컬 스토리지에서 불러와 렌더링 최소화.

---

9. 조건부 렌더링

{hasClicker && <Clicker />}
{hasClicker ? <Clicker /> : null}

---

10. Props 전달

<Clicker keyName="countA" color="crimson" />

export default function Clicker({ keyName, color }) {
  return <div style={{ color }}>...</div>
}

• 부모 → 자식 데이터 전달.
• 특별 prop: children

---

11. 상태 끌어올리기 (Lifting State Up)

// App.jsx
const [total, setTotal] = useState(0)
const increment = () => setTotal(total + 1)

<Clicker increment={increment} />

// Clicker.jsx
const buttonClick = () => {
  setCount(count + 1)
  increment()
}

---

12. 배열 렌더링과 key

{[...Array(clickersCount)].map((_, i) => 
  <Clicker key={i} keyName={`count${i}`} />
)}

---

13. 값 메모이제이션 — useMemo

const colors = useMemo(() => {
  return [...Array(clickersCount)]
    .map(() => `hsl(${Math.random() * 360}deg, 100%, 75%)`)
}, [clickersCount])

• 성능 최적화: 불필요한 재계산 방지.

---

14. DOM 참조 — useRef

const buttonRef = useRef()

useEffect(() => {
  buttonRef.current.style.backgroundColor = 'papayawhip'
}, [])

• DOM 요소 직접 접근 필요 시 사용.

---

15. API 데이터 가져오기

const [people, setPeople] = useState([])

useEffect(() => {
  getPeople()
}, [])

const getPeople = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const data = await res.json()
  setPeople(data)
}

• **map()**을 사용해 리스트 렌더링:

<ul>
  {people.map(p => <li key={p.id}>{p.name}</li>)}
</ul>

---

16. 성능과 Virtual DOM

• React는 변경된 부분만 실제 DOM에 반영 (Virtual DOM 비교 기반).
• 무거운 연산은 useMemo·useCallback 등으로 최적화.