[React] input 박스 Enter 후 초기화 하기

React 다 까묵어버린 몽총이의 갑작스런 프로젝트 시작

정말로 React 하나도 기억 안나서 당황스럽지만 검색을 통해서 하나하나 다시 만들어가는 중

 

이번에 만들어볼 것은 타자연습 사이트로

 

지금 일단 구현하는건

input박스에 단어를 입력하고 Enter를 치면 input 박스의 텍스트가 초기화 되도록 하는 것이다

 

여기서 useRef를 사용하는데 useRef가 무엇이냐~~ 하면~~

까먹음

 

사실 다음주부터 react 수강을 하는데 복습 겸 찾아보았다

 

useRef 사용

특정 DOM을 선택할 수 있게 해주는 react Hook로

- 특정 래퍼런스 값을 참조할 수 있다

- 래퍼런스 값의 DOM 조작 가능

- 래퍼런스 콘텐츠 재 생성 방지

 

사용하기 위해서는 일단

import { useRef } from 'react';

로 최 상단에서 호출해준다

그리고 처음에는 초기 값을 설정해줘야한다.

const inputRef = useRef(null)

// inputRef 라는 이름을 가진 useRef를 초기값 null로 생성

결과물

키보드의 Enter을 치면 input창에 입력되어있는 텍스트가 초기화되어서 다시 입력을 할 수 있다

코드

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


function Content() {
    const [text, setText] = useState("");
    const inputRef = useRef(null) // 초기 값 null로 설정

    const textClear = () => {
        inputRef.current.value = null // 값을 초기화
    }


    const handlePress = (e) => {
        console.log(e.key)
        if(e.key === 'Enter'){
            setText(e.target)
            textClear()
        }
        
    }
    return (
        <>
            <div className='content-box'>
                <h1>
                    타자연습
                </h1>
                <div className='typing-text'>
                    안녕하세요
                </div>
                <div className='typing-box'>
                    <input type='text'
                        id='filed'
                        onKeyDown={handlePress} // Enter 입력시
                        ref={inputRef}>
                    </input>
                </div>  
            </div>
        </>
    );
}

export default Content;

안녕하세요를 보고 입력하도록 만들었는데

저 부분은 나중에 JSON파일과 연결하여 랜덤으로 텍스트를 불러올 수 있도록 수정할 예정

 

handlePress 함수를 호출 했을 때 onKeyDown된 값이 'Enter' 인 경우

textClear() 함수를 호출한다

 

textClear() 함수에서 inputRef의 값을 ' '(빈 값)으로 변경시켜서

 

Enter를 입력하면 input 값이 사라지는 것을 확인할 수 있다!

 

참고 : 

https://react.dev/reference/react/useRef

useRef – React

혹시 제가 잘못 알고 있는 부분이 있다면 댓글 주시면 감사하겠습니다