[React Project: 간단한 일기장(2)] DOM 조작하기 - useRef

 

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

 

 

 

[React Project: 간단한 일기장(1)] React 사용자 입력 처리 (+ useState 활용)

이어서...

---

전 포스팅에서 이어서 시작한다.
마지막에서 만들었던 handleSubmit을 조작하여 제출할 때 조건을 걸어 제한을 두거나 효과를 넣어볼 것이다!

---

1. 조건

작성자는 1글자이상 

일기 본문은 5글자 이상 써야 하고 아닐 시에는 alert를 띄어보자

    const handleSubmit = ()=>{
        if(state.author.length<1){
            alert("작성자는 최소 1글자 이상 입력해주세요");
            return;
        }
        if(state.content.length<5){
            alert("일기 본문은 최소 5글자 이상 입력해주세요");
            return;
        }
        alert("저장 성공!");
    }

조건문마다 return을 해줘서 더 이상 진행이 안되도록 막아준다

 

그럼 조건이 맞지 않으면 alert 이 뜰 것이다

왼쪽과 같이 말이다 하지만 냅다 alert를 띄어버리는 건 좋은 UI/UX가 아니다

그래서 조건을 충족하지 않으면 충족하지 않은 부분에 오른쪽처럼 포커스를 줄 것이다

 

그럼 어떤 DOM에 포커스를 줘야 할까?

DOM

- 웹페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용할 수 있게 브라우저 내에서 트리구조로 만든 객체 모델

리액트에선 DOM요소를 선택할 수 있는 기능을 제공하고 있다 

---

2. useRef

바로 useRef이다 사용하기 전에 임포트부터 해주자

import React, { useRef,useState } from "react";

우선 우리가 focus 해야 할 요소는 두 가지가 있다

1. input 필드

2.textarea 필드

 

각자의 요소에 접근하는 방법을 알아보자 우선 Input요소에 접근을 해보자

const authorInput = useRef();

useRef의 반환값을 authorInput 상수에 저장한다

 

그럼 여기엔 뭐가 저장되는지를 보자 

React.MutableRefObject 가 저장이 되는데 이것은 HTML DOM요소에 접근할 수 있는 기능을 한다.

이 값을 input태그 안에 넣어주자 그럼 우리는 authorInput 레퍼런스(ref) 객체를 통해서 이 input태그에 접근이 가능해진다

그럼 이 값을 어떻게 쓸까?

 

authorInput.current.focus();

DOM요소를 선택하는 useRef로 생성한 레퍼런스 객체 authorInput은 현재 가리키는 값을 current라는 

프로퍼티로 불러와 사용할 수 있다.

즉 authorInput.current == input 태그라는 것이다 여기에 focus를 줘 효과를 나타낸다

 

그럼 같은 방법으로 textarea필드에도 적용해 보자

 

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

그럼 handleSubmit 함수는 이렇게 변경이 될 것이다!

 

조건에 맞지 않으면 useRef를 사용해 해당 요소에 focus기능 주기 완료!

 

 

전체 코드는 ↓

import React, { 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;
        }
        alert("저장 성공!");
    }

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

 

---

..💬

ref(reference 줄임말) 은 HTML에서 id를 사용해 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법!

Ref와 DOM – React

역시 공식문서가 짱이댜