[TIL] useRef 와 useClik

useRef란?

컴포넌트를 작성하다 보면 태그를 직접 다뤄야 할 때가 있다. js의 경우에는 document.getElementById 메서드로 선택했다 React의 경우 특정 엘리먼트의 크기나 위치 등을 가져와 설정할 때 ref를 사용한다.

간단한 코드를 작성해보자.

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const inputRef = useRef() //input 변수에 useRef()를 선언
  return (
    <div className="App">
      <div>Hi</div>
      <input placeholder="Name" ref={inputRef} /> // input태그에 ref로 input을 참조
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <App />,

  rootElement
)

const input = useRef()

input 변수에 useRef()라는 Hook 함수를 추가한다 여기서 변수 이름 input은 아무거나 입력해도 된다 그다음 참조할 태그인 input에 ref={ inputRef }을 추가해 준다 { inputRef }은 위에 변수명을 적어준다 그러면 우리는 console.log(inputRef)을 해보면 아래와 같이 current 안에 있는 input tag를 얻을 수 있다

정확한 태그 값을 없기 위해선 inputRef.current 값을 주어야 한다.

useClick

아래 코드는 useRef와 useEffect를 활용하여 title을 클릭하면 console 창에 **"Nice Too Meet You"**가 입력되게 만들어보자

const useClick = onClick => {
  const element = useRef()
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener('click', onClick)
    }
  })
  return element
}

useClick() 함수를 만들며 프로퍼티로 onClick을 받는다 (클릭을 하였을 때 실행할 함수 값을 받는다) 이제 useEffect를 사용하는데 먼저 element에 값이 있는지 확인한 후 이상 없으며 해당 element 즉 ref로 참조한 태그에 onClick라는 이벤트를 추가한다

const App = () => {
  const sayHello = () => console.log('Nice Too Meet You')
  const title = useClick(sayHello)
  return (
    <div className="App">
      <h1 ref={title}> Hi </h1>
    </div>
  )
}

title이라는 변수를 만든 후 useClick()이라는 함수에 인자 값으로 클릭을 하였을 때 실행할 함수 값을 받는다 sayHello라는 함수로 실행 시 console 창에 Nice Too Meet You라고 나오는 함수다.

[최종코드]

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

// element를 클릭했을때 실행되는 함수
const useClick = onClick => {
  const element = useRef()
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener('click', onClick)
    }
  })
  return element
}

const App = () => {
  const sayHello = () => console.log('Nice Too Meet You')
  const title = useClick(sayHello)
  return (
    <div className="App">
      <h1 ref={title}> Hi </h1>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <App />,

  rootElement
)