119. React Hooks: useRef ? TIL 23.01.27

---

 

input태그에 오류 처리를 하던 중 빈칸에 focus를 가게끔 코드를 작성하고 싶었다.
그래서 기존에 사용하던 document.getelementbyid('').focus()를 사용했다.
혹시 몰라서 'React에서 focus를 할때' 구글링을 해보니 useRef를 사용한다고 쓰여있었다.
useRef에 대해서 알아보자.

 

UseRef

JavaScript를 사용할 때는, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택했다.

React에서도 DOM을 선택할 상황이 오는데 예로 focus를 해야 하는 상황
이럴 때 리액트에서는 ref를 사용한다.

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook.

 

사용방법

 

1. import useRef

useRef는 react내장함수이므로 useState와 같은 방법으로 import 한다.

import React, { useState,useRef } from "react" //useRef 임포트해주기

 

2. useRef변수 만들기

const inputTitle = useRef(); //inputTitle변수선언
const inputContent = useRef(); //inputContent변수선언

 

3. inputTitle, inputContent 넣어주기

- 선택하고 싶은 DOM에 ref 값을 설정해 줌

제목: <input ref={inputTitle} value={title} onChange={handleTitleChange}/>
내용: <input ref={inputContent} value={contents} onChange={handleContentChange}/>

 

4. 추가버튼을 눌렀을 때 input에 값이 없을 경우 오류처리해 주면서 focus 해주기

- 위에서 선택한 DOM을 통해서 .current 값은 내가 원하는 DOM을 가리킴

function Input({setTodos}) {

    const [title, setTitle] = useState('');
    const [contents, setContents] = useState('');

    const inputTitle = useRef(); //inputTitle변수선언
    const inputContent = useRef(); //inputContent변수선언

    const handleSubmitClick = (event) => {
    
        //form테그 새로고침 방지
        event.preventDefault();

        if (!title){
            alert('제목을 입력해주세요')
            inputTitle.current.focus(); //제목이없으면 제목에 포커스
            return;
            
        }

        if (!contents){
            alert('내용을 입력해주세요')
            inputContent.current.focus(); //내용이없으면 내용에 포커스
            return; 
        }

    };

 

 

전체코드

import React, { useState,useRef } from "react" //useRef 임포트해주기
import {v4 as uuidv4} from 'uuid';


function Input({setTodos}) {

    const [title, setTitle] = useState('');
    const [contents, setContents] = useState('');

    const inputTitle = useRef(); //inputTitle변수선언
    const inputContent = useRef(); //inputContent변수선언

    const handleSubmitClick = (event) => {
    
        //form테그 새로고침 방지
        event.preventDefault();

        if (!title){
            alert('제목을 입력해주세요')
            inputTitle.current.focus();
            return;
            
        }

        if (!contents){
            alert('내용을 입력해주세요')
            inputContent.current.focus();
            return; 
        }

    };

    return(
        <section>
            <form onSubmit={handleSubmitClick}>
                제목: <input ref={inputTitle} value={title} onChange={handleTitleChange}/>
                내용: <input ref={inputContent} value={contents} onChange={handleContentChange}/>
                <button>추가</button>
            </form>
        </section>
    );
}

export default Input