[카테고리:] 미분류

웹브라우저의 기능 중 Ctrl + Plus나 Ctrl + Minus를 누르면 화면이 커지거나 작아집니다. 즉 화면의 확대, 축소 기능인데요. 이 Zoom 값을 얻는 JS 코드입니다.

const zoom = (window.outerWidth / window.innerWidth);

위의 zoom 값은 비율이고 % 값을 원한다면 100을 곱해주면 됩니다. 마우스로 어떤 UI를 드래그 해서 이동 시킬때 꼭 반영해 줘야 할 Zoom 값입니다.

먼저 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을 통해 매서드를 정의해줍니다.