TIL : useRef()

오늘은 미뤄왔던 추가기능을 구현했다. focus기능과, 아무것도 입력받지 않았을 때, 추가되지 않도록 하는 기능을 구현해보았다. 그 중 useRef를 이용한 fucus기능을 정리하려 한다.

useRef ( )

: 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용해야 하는데, 이때, 컴포넌트에서 이를 설정할 때 쓰는 것이 useRef이다. useRef Hook은 DOM을 선택하는 용도 외에도 컴포넌트 안에서 리랜더링 없이 조회 및 수정할 수 있도록 한다. 주로 focus기능이나 초기화기능을 구현할 때 사용하게 된다.
( 참고 : focus사용, useRef사용, useRef개념)

useRef를 이용한 focus기능구현

1. import 하기

import { useRef } from "react";

2. 함수안에서 변수만들기

  const titleRef = useRef();
  const contentRef = useRef();

3. input 태그 ref에 변수 넣어서 연결하기

<input ref={titleRef}
       autoFocus={true} //새로고침 시 자동 focus
       value={title}/>

4. focus기능 사용하기 (DOM의 current를 focus! )

titleRef.current.focus();
contentRef.current.focus();

useRef라는 새로운 Hook을 공부하면서 새로운 기능을 더 구현할 수 있었다는 결과에 뿌듯했다. 오늘은 과제에 집중을 못하고 스터디하면서 기본에 집중해보고, 복붙이 아닌 직접 코드를 작성해보는 연습을 이어나갔다. 외워야겠다는 생각을 안하고 있었는데, 아무래도 혼자힘으로는 코드를 쓰기가 어려운 느낌이라, 쫓기듯 외웠다. 이제는 어디서 뭘써야하는지 알게 되었다. 외우는 게 도움이 많이 된 듯하다. 이제 얼른 redux과제도 마무리해서 redux로 만든 투두리스트도 외워봐야겠다.