[React.js] React에서 DOM 조작하기

 

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

 

React에서 DOM 조작하기

DOM을 조작해서 일기 저장 버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus를 주는 기능을 만들어보자.

 

일단 작성자 input과 일기 본문 textarea에 한 글자도 입력되지 않거나 5글자 미만으로 입력된 경우 저장 버튼을 눌러도 저장이 되지 않는 코드를 작성하자.

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

        isFinite(state.content.length < 5) {
            alert("일기 본문은 최소 5글자 입력해주세요.");
            return ;
        }
        alert("저장 성공");
    }

 

작성자가 없을 경우

 

작성자는 있는데 본문이 5글자 미만인 경우

 

그런데 요즘에는 alert을 잘 사용하지 않는다고 한다. 그래서 alert보다는 focus를 사용해 사용자가 저장 조건을 충족할 수 있도록 코드를 변경해보자. focus를 사용하려면 HTML에 있는 DOM에 접근할 수 있어야 한다. 리액트에서는 DOM 요소에 접근하기 위해 useRef라는 객체를 사용한다. 고로 import에 useRef를 추가해주면 된다.

import {useRef, useState} from "react";

const DiaryEditor = () => {

    // useRef의 MutableRefObject는 HTML의 DOM 요소에 접근할 수 있도록 하는 기능
    const authorInput = useRef();
    const contentInput = useRef();
    

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

    const handleChangeState = (e) => {
        console.log(e.target.name);
        console.log(e.target.value);

        setState({
            ...state,
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit =(e) => {
        if(state.author.length < 1) {
            //focus
            authorInput.current.focus();
            //useRef를 이용해 생성한 객체는 현재 가리키는 값을 current로 가져올 수 있음.
            // 즉 authorInput.current는 input을 가리킨다.
            return ;
        }

        if(state.content.length < 5) {
            //focus
            contentInput.current.focus();
            return ;
        }
        alert("저장 성공");
    }

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

 

반응형