[글쓴이:] 김 형준

R3F는 다음처럼 설치될 수 있습니다.

npm install three@0.148 @react-three/fiber@8.9

또는

npm install three @react-three/fiber

시작점이 되는 index.jsx 코드 예는 다음과 같습니다.

import { Canvas } from "@react-three/fiber"
import MyThree from './MyThree'

const root = createRoot(document.querySelector('#root'))

root.render(
    
        
    
)

MyThree는 컴포넌트인데, 코드는 다음과 같습니다.

import { extend, useFrame, useThree } from "@react-three/fiber"
import { useRef } from "react"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

extend({ OrbitControls })

export default function MyThree() {
    const cubeRef = useRef()

    useFrame((state, delta) => {
        cubeRef.current.rotation.y += delta
    })

    const { camera, gl } = useThree()

    return <>
        
        

        
            
            
        

        
    </>
}

큐브 회전에 대한 애니메이션 처리와 OrbitControls가 적용된 코드입니다. 물론 drei를 사용하면 더욱 간단히 OrbitControls를 적용할 수 있습니다.

Fetch 코드 패턴

프론트엔드 단 개발에서 밥 먹듯 사용하는 데이터 요청 코드입니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(result => setPeople(result))
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}

위의 코드도 좋지만, 다음 코드가 더욱 좋습니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        const getPeople = async () => {
            const response = await fetch("https://jsonplaceholder.typicode.com/users")
            const result = await response.json()
            setPeople(result)
        }
        getPeople()
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}