[일기장 만들기_02] React에서 DOM 조작하기

목표

- 저장 버튼 클릭시 입력내용이 조건에 만족하는지 확인

- 조건 미 만족시 해당 input focus 처리

---

Ref를 사용해야 할 때

- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.

- 애니메이션을 직접적으로 실행시킬 때.

- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

---

최종코드

import React, { useRef,useState } from "react"; // 💡 DOM 선택하는 함수를 최상단에 추가 선언 

const DiaryEditor = () => {

  const authorInput = useRef(); // 💡 특정 DOM 선택시 사용
  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(); // 👉 해당 input에 포커스를 하기위해 current.focus(); 추가
      return false;
    }

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

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

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput} // 👉 ref
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="제목"
          type="text"
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </div>
      ~~~~~
    </div>
  );
};

export default DiaryEditor;

 

---

Demo : winterlood - codeSandbox

useRef 참고 : https://react.vlpt.us/basic/10-useRef.html