[React] 리액트에서 DOM 조작하기

📐 특정 길이 이하로 들어오면 alert

const handleSubmit = () => {
  if (state.author.length < 1) {
    alert("작성자는 최소 1글자 이상 입력해주세요.");
    return;
  }

  if (state.content.length < 5) {
    alert("일기 본문은 최소 5글자 이상 입력해주세요");
    return;
  }
};

근데 이 방법은 트랜디 하지 않는다. 만약 입력이 덜 되었다면 포커스를 통해서 사용자에게 입력이 덜 되었음을 알려줄 것이다. 포커스란 커서가 띄워지면서 입력이 안된 해당 박스가 굵은 박스로 표시되는 것이다.

📐 DOM 요소에 접근하기

웹 페이지에 있는 태그들에 접근을 할 수 있다.

📍 사용 방법

1. import { useRef } from “react” : React 에서 돔 요소 접근을 위한 함수를 제공

2. useRef() 함수 사용을 위한 변수 생성

   const authorInput = useRef();
   const contentInput = useRef();
   

   useRef() 함수를 호출해서 반환값을 authorInput, contentInput 변수에 넣어준다. 변수 안에는 돔 요소를 접근 할 수 있는 기능이 있다.

3. authorInput, contentInput 객체 사용하기

   • authorInput 객체를 사용하기 위해서 input 태그에 접근할 수 있도록 해준다.

     <input
       ref={authorInput}
       name="author"
       value={state.author}
       onChange={handleChangeState}
     />
     

   • contentInput 객체를 사용하기 위해서 textArea 태그에 접근할 수 있도록 해준다.

     <textarea
       ref={contentInput}
       name="content"
       value={state.content}
       onChange={handleChangeState}
     />
     

   • 객체를 사용하기 위한 함수 만들기

     const handleSubmit = () => {
       if (state.author.length < 1) {
         authorInput.current.focus();
         return;
       }
     
       if (state.content.length < 5) {
         contentInput.current.focus();
         return;
       }
       alert("저장 성공");
     };
     

     🚦 authorInput, contentInput : 돔 요소를 선택하는 useRef() 기능으로 생성한 레퍼런스 객체
     🚦 current : 현재 가리키는 값
     🚦 focus() : 현재 가리키고 있는 값의 포커스를 처리