React - useRef

슬로그·2022년 11월 22일
0

React

목록 보기
1/12
post-thumbnail

const inputRef = useRef();
<div ref = {inputRef} />

React로 ref 객체를 전달하여 React는 노드가 변경될 때마다 변경된 DOM 노드에 .current 프로퍼티를 설정하게 된다.

useRef Hook는 언제 사용 ❓

  1. input component에 focus 를 위치시킬 필요가 있는 경우
  2. 속성 값을 초기화 할 필요가 있는 경우
//...코드
useEffect(() => {
    interval.current = setInterval(handlerEvent,100);
      return() => {
      	clearInterval(interval.current);
      }
    },[])
  1. useRef로 컴포넌트 안의 변수 관리하기
  • 컴포넌트의 속성 정보를 조회 & 수정할때
  • setTimeout, setInterval을 통해 만들어진 id
  • 배열에 새 항목을 추가할때 필요한 고유값 key

배열의 고유값 변수로 nextId를 설정해주고 , useRef()파라미터로 다음 id가 될 숫자 4를 넣어준다. 파라미터 값을 넣어주면 해당 값이 변수의 current값이 된다.
nextId 변수를 수정하거나 조회하려면 .current값을 수정하거나 조회

출처: https://yoonjong-park.tistory.com/entry/React-useRef-%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80

profile
빨리가는 유일한 방법은 제대로 가는것

0개의 댓글