useRef 로 컴포넌트 안의 변수 만들기

🔖 useRef 로 컴포넌트 안의 변수 만들기

📌 배운 내용 및 기억하고 싶은 내용

• useRef();는 특정 DOM을 선택할 뿐만이 아니라, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리도 할 수 있다.
• useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다
  • 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면에, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다.
• useRef로 관리 할 수 있는 값들
  • setTimeout, setInterval 을 통해서 만들어진 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치
• useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.
  • 값을 수정 할 때는 .current 값을 수정하면된다.
  • 값을 조회 할 때는 .current 를 조회하면 된다.

  // 새 항목에서 사용할 id를 관리하는 용도로 useRef 함수 사용
	// useRef는 객체 값을 가지기 때문에 const를 사용해도 문제가 발생하지 않음(권장) 
  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };