useRef

김태현·2021년 1월 10일
0

리액트

목록 보기
1/11

useRef는 함수형 컴포넌트 에서 ref를 쉽게 사용하게 만들어 준다
등록 버튼을 눌렀을 때 포커스가 인풋 쪽에 걸리도록 useRef를 사용해보자

...

const inputEl = useRef(null);

const onInsert = useCallback(() => {
  const nextList = [...list, Number(number]
  setList(nextList);
  inputEl.current.focus();
}, [number, list])

...

<input value={number} onChange={onChange} ref={inputEl} />

...

사용법은 이렇고, useRef를 통해 만든 객체의 current 값은 실제 해당 엘리먼트를 가리킨다

profile
프론트엔드 개발자

0개의 댓글