2023.01.20 - React Hook / useRef

- useRef :  .current 프로퍼티로 전달된 인자(initilaValue)로 초기화된 변경가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. 

- useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다.

- useRef는 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있다.

 

사용 예) focus

1) useRef 를 사용하기 위해 authorInput, contentInput 객체 생성

const authorInput = useRef();

const contentInput = useRef();

import { useRef, useState } from "react";
// useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook

const DiaryEditor = () => {
  const authorInput = useRef();
  const contentInput = useRef();
  //React.MutableRefObject가 저장됨:dom요소 접근가능

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

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  // 일기저장하기 함수
  const handleSubmit = (e) => {
    // console.log(state);
    if (state.author.length < 1) {
      // 1글자 이상 입력하지않으면 focus
      authorInput.current.focus();
      return;
    }

    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }

    alert("저장 성공!");
  };

2) 일기 저장함수 handleSubmit에 사용

autorInput.current.focus()

 

 

 <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
        />
      </div>

 

 

 

3) input에 ref 값 넣기

ref = {authorInput}