React DOM 사용해보기(Ref)

Ref 기능 사용해보기

useRef는 리액트의 기능이기 때문에 리액트에서 import 해야 한다.

 

import { useRef, useState } from "react";

 

import { 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;
        }

        console.log(state);
        alert("저장 성공!");
    };

    return (
        <div className="DiaryEditor">
            <h2>오늘의 일기</h2>
            <div>
                <input ref={authorInput} 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>
                <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;

 

 

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

각 authorInput과 contentInput 객체에 useRef()를 선언한다.

이렇게 선언을 하면  useRef() 기능으로 생성한 authorInput 객체는 현재 가리키는 값을 focus 한다.

 

그 후 접근하고 싶은 태그에 

ref={authorInput}

ref={contentInput}

입력을 해준다.

 

이렇게 입력을 해주면 authorInput이라는 래퍼런스 객체를 통해 input 태그에 접근이 가능하다.

   

 

 const handleSubmit = () => {
        if (state.author.length < 1) {
            authorInput.current.focus();
            return;
        }

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

        console.log(state);
        alert("저장 성공!");
    };

이렇게 함수를 설정한다.

 

 

 

결과

 

조건에 맞지 않은 값을 입력 후 일기 저장하기 버튼을 누르면 focus가 되는 모습을 볼 수 있다.