React useRef

📌 React에서 DOM 조작하기

목표: 저장 버튼을 클릭했을 때 정상적으로 입력되지 않았으면 focus하기

✍ 정상적으로 입력되지 않은 element에 접근하기

useRef : React.MutableRefObject를 반환함. HTML 요소에 접근할 수 있는 기능.

const DiaryEditor = () => {

    const authorInput = useRef();
    const contentsInput = useRef();

    const handleSubmit = () =>{
        if(state.author.length < 1){
            authorInput.current.focus();
            // ref가 authorInput인 태그에 접근 -> current로 현재 태그 가져옴
            return; // 더이상 진행 안되도록 동작 끝냄
        }
        if(state.contents.length < 3){
            contentsInput.current.focus();
            return;
        }
        alert('저장 성공!');
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input ref={authorInput} />
        </div>
        <div>
            <textarea ref={contentsInput} /> 
        </div>

• const authorInput = useRef(); 레퍼런스 객체 생성
• <input ref={authorInput} /> 지켜볼 요소에 ref 속성 추가
• authorInput.current 현재 요소 불러옴
• focus(); 원하는 이벤트 추가

---

Studying...

https://inf.run/qAuJ
한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood