[React] useRef로 DOM 조작하기 (일기장 만들기 2탄)

 

useRef로 DOM 조작하는 법을 알아보자

 

 

코드가 1탄과 이어지기 때문에 1탄부터 보고 오셔야합니다~

https://dev-ini.tistory.com/73

[React] 사용자의 입력 처리하기 (input, button에 이벤트 달기) (일기장 만들기 1탄)

 

 

---

 

 

 alert으로 입력 강제하기 

 

요즘에는 잘 안쓰이는 방법

import {useState} from "react";
import './DiaryEditor.css';

const DiaryEditor = () => {
  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){
      alert("작성자는 최소 1글자 이상 입력해주세요");
      return;
    } 

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

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

  

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input name="author" value={state.author} onChange={handleChangeState} />
      </div>
      <div>
        <textarea name="content" value={state.content} onChange={handleChangeState} />
      </div>
      <div>
        <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;

 

 

---

 

 

 focus로 입력 강제하기 (useRef 사용) 

 

import {useState} from "react";
import {useRef} from "react"; // 어떤 Dom 요소를 선택할 수 있게 함 (어디에 focus 효과를 줄지)
import './DiaryEditor.css';

const DiaryEditor = () => {
  const authorInput = useRef();
  // HTML 돔 요소를 접근할 수 있게 해줌
  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){
      // focus
      authorInput.current.focus(); // useRef라는 기능으로 생성한 객체는 현재 가리키는 값을 current라는 프로퍼티로 불러와서 사용 가능
      return;
    } 

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

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

  

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input ref={authorInput} name="author" value={state.author} onChange={handleChangeState} />  
      </div>
      // input과 textarea에 useRef 전달해주기
      <div>
        <textarea ref={contentInput} name="content" value={state.content} onChange={handleChangeState} />
      </div>
      <div>
        <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;

 

 

 

 위 코드의 결과