React 기본 - 간단한 일기장 프로젝트 2 (useRef)

 

목표

 

DOM 요소에 접근할 수 있는 useRef를 이용해서 정상적으로 입력되지 않았다면 강제적으로 focus 하는 기능 구현

 

 

● 작성자가 1글자 이하이면 작성자 입력창 focus

● 내용 부분이 5글자 이하이면 내용 입력창 focus

 

 

기능구현

 

useRef를 사용해서 이 기능을 구현할 수 있다.

 

1.

먼저 import 한다.

 

2.

 

useRef를 호출해서 반환값을 authorInput, contentInput 상수에 담는다.

 

 

authorInput, contentInput 상수에는 React.MutableRefObject가 저장된다.

MutableRefObject는 HTML DOM 요소에 접근할 수 있도록 해준다.

 

3.

 

input 태그와 textarea 태그에 각각 ref = {authorInput}, ref = {contentInput} 를 써준다.

그러면 이제,

authorInput, contentInput라는 레퍼런스 객체를 통해서 각각 input 태그와 textarea 태그에 접근할 수 있게 된다.

 

4. 

 

저장하기 버튼을 누르면 실행되는 handleSubmit 함수이다.

작성자가 1글자 이하이면 authorInput 객체를 통해서 input 태그에 접근해 focus 한다.

내용 부분이 5글자 이하이면 contentInput 객체를 통해서 textarea 태그에 접근해 focus 한다.

 

 

결과

 

내용부분에 3글자만 입력하고 일기 저장하기 버튼을 누르면 textarea 태그가  focus 된다. 

 

 

 

조건을 만족하면 "저장 성공!"이 잘 뜬다.