코딩을 쉽게 해보자

React는 컴포넌트를 자주 다루지 않아도 되도록 자동으로 DOM을 렌더 출력과 일치하도록 업데이트한다. 하지만 React에 의해 다뤄지고 있는 Dom elements를 접근해야 하는 경우가 있다. 예를 들어, 노드를 focus하거나 스크롤, 이것의 크기나 위치를 측정할 때다. React에서는 이러한 방법을 기본적으로 하는 방법을 제공하지 않으므로, ref를 Dom node에 사용해야할 것이다. 노드에 ref를 가져오기 React에 의해 다뤄지는 DOM node에 접근하기 위해서는 useRef를 import 해야한다. 그 이후, 컴포넌트 안에서 ref를 선언하고, 마지막으로 DOM node에 ref 어트리뷰트를 넘긴다. import { useRef } from 'react'; const myRef = u..

https://beta.reactjs.org/learn/referencing-values-with-refs Referencing Values with Refs A JavaScript library for building user interfaces beta.reactjs.org 컴포넌트가 어떠한 정보를 "기억"하기를 바라고 그 정보가 새로운 렌더링을 일어나지 않길 원한다면, ref를 쓸 수 있다. 컴포넌트에 ref 추가하기 useRef 훅을 React에서 import하면 쓸 수 있다. 컴포넌트 안에서 useRef훅을 가져와 참조하고 싶은 초기값을 전달하면 const ref = useRef(0); // useRef는 이러한 object를 반환한다. { current: 0 // The value you pa..