[React 기본 일기장 만들기] React에서 DOM조작하기

이번에는 특정 조건을 벗어나는 입력값을 받으면 실행이 되지 않도록 하는 기능을 만들 것이다.

 

조건에 맞지 않는 입력에 alert 띄우기

alert 대신 focus하기

 

 

앞서 DiaryEditor.js에서 버튼을 눌렀을 때 동작하는 handleSubmit 함수를 만들었는데, 이 함수를 아래와 같이 변경해준다. 

state그룹명.state명.length 을 이용하여 문자열의 길이에 접근할 수 있다.

 

 

조건에 맞지 않는 입력에 alert 띄우기

 

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

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

 

그럼 이렇게 글자수가 부족하면 alert 창이 뜬다.

 

alert 대신 focus하기

 

그런데 alert를 띄우는 것이 좋은 ui가 아니다. 따라서 글자수를 다 채우지 않았을 때 focus를 주는 방법을 사용할 것이다.

 

 

레퍼런스를 사용하기 위해 이렇게 상단에 useRef를 추가한다.

 

const authorInput = useRef();

 

그 다음 이 코드를 추가한다. useRef함수는 입력하는 칸(DOM요소)에 접근하는 것을 도와준다.

input태그에다가 ref에 authorInput를 넣는다. 

 

 const handleSubmit = (e) =>{
        console.log(state);
        if(state.author.length < 1){
            authorInput.current.focus();
            return;
        }

        if(state.content.length < 5){
            contentInput.current.focus();
            return;
        }

        alert("저장성공");
    }

그 다음 이렇게 handleSubmit에서 alert 대신 contentInput.current.focus()를 넣는다.

이렇게 하면 조건에 만족하지 않는 입력이 들어오면 focus하는 기능이 완성된다.

 

출처 : 한입크기로 잘라먹는 리액트