[카테고리:] 미분류

먼저 App.jsx 파일에 코드가 작성된 App 컴포넌트가 있습니다.

import { useRef } from 'react'
import './App.css'
import MyComponent from './MyComponent'

function App() {
  const refComponent = useRef()
  
  return (
    <>
      <MyComponent ref={refComponent} />
      <button onClick={ () => { refComponent.current.setName("Dip2K") } }>set Name</button>
      <button onClick={ () => { refComponent.current.setAge(100) } }>set Age</button>
      <button onClick={ () => { 
        alert(`Name: ${refComponent.current.getName()}, Age: ${refComponent.current.getAge()}`) 
      } }>get Info</button>
    </>
  )
}

export default App

실행 결과에 대한 화면은 다음과 같구요.

화면에서 App 컴포넌트의 코드에서 보이는 MyComponent는 Name과 Age를 입력받는 부분입니다. 그 외 3개의 버튼을 보면 MyComponent의 매서드를 호출하고 있습니다. 리엑트에서 컴포넌트의 매서드를 호출한다라는 것은 리엑트 계에서는 매우 어색한 경우이며 피해야 하는 경우라고 합니다.

MyComponent에 대한 코드는 다음과 같습니다.

import { forwardRef, useImperativeHandle, useRef } from "react";

function MyComponent(props, ref) {
  const refNameInput = useRef()
  const refAgeInput = useRef()

  useImperativeHandle(ref, () => ({
    getName: () => { return refNameInput.current.value },
    setName: (v) => { refNameInput.current.value = v },
    getAge: () => { return refAgeInput.current.value },
    setAge: (v) => { refAgeInput.current.value = v },
  }))

  return (
    <div>
      <p><span>Name </span><input ref={refNameInput} /></p>
      <p><span>Age </span><input ref={refAgeInput} /></p>
    </div>
  )
}

export default forwardRef(MyComponent)

리엑트에서 함수형 컴포넌트에 매서드를 추가하기 위해서는 forwardRef라는 고차함수와 useImperativeHandle라는 훅을 동시에 사용해야 하며 useImperativeHandle을 통해 매서드를 정의해줍니다.

지금 자신이 사용하는, 학습하는 IT 기술이 시장에서 얼마나 많이 사용되고 있는지를 평가할 수 있는 사이트입니다.

먼저 Python입니다. AI 관련 프로젝트에서 가장 많이 사용되는 언어인데.. 그 추세가 심상치 않습니다.

다음은 개인적으로.. 미래의 서버 개발을 위해 가장 많이 사용될거라 생각하는 Express입니다.

그리고 요즘 제가 가장 많이 접하고 있는 웹 기반의 3D 기술인 three.js 라이브러리입니다. three.js에 대한 재미있는 점은 three.js가 미국 다음으로 한국에서 가장 많이 사용된다는 것입니다.

여러분들도 자신이 관심이 있는 기술의 트랜드를 한번 확인해 보시면 미래에 대한 자신의 준비를 좀더 합리적으로 대응할 수 있을거라 생각됩니다.

시스템에 대한 환경설정 파일 위치를 파악하기 위한 SQL

SHOW hba_file;

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를 적용할 수 있습니다.