[React] Dom 조작하기 - useRef

바닐라 자바스크립트에서 DOM을 조작해야하는 상황에선

getElementbyId, querySelector 같은 selector함수를 사용해서 DOM 을 선택한다.

Vue.js 에서는 html 태그 속성안에 ref="title" 적고

스크립트 부분에서 this.$refs.title로 DOM 에 접근이 가능하다.

그렇다면 React에서는 어떤 방법으로 접근할까??

 

 

1. useRef Hook 함수 사용 

useRef() 를 사용하여 Ref 객체를 만들고,

이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다.

그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.

import React, { useRef, useState } from "react";

const DiaryEditor = () => {
  const authorInput = useRef();
  const contentInput = useRef();

  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  })

  const handleChangeState = (e) => {
      setState({
        ...state,
        [e.target.name] : e.target.value
      })
  }
  
  const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus()
      return
    }
    if (state.content.length < 5) {
      contentInput.current.focus()
      return
    }
    alert('저장성공')
  }

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input type="text"
               name="author"
               ref={authorInput}
               value={state.author}
               onChange={handleChangeState}/>
      </div>
      <div>
        <textarea name="content"
                  ref={contentInput}
                  value={state.content}
                  onChange={handleChangeState}>
        </textarea>
      </div>
      <div>
        <span>오늘의 감정 점수 : </span>
        <select name="emotion"
                value={state.emotion}
                onChange={handleChangeState}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  )
}

export default DiaryEditor

length에 충족하지 못하였을 때 input, textarea에 focus가 되도록 만들었다.

 

 

 

참고