[TIL] 2109016 오늘 공부는 getElementById/useRef

리액트에서 getElementsByClassName 로 html 태그들을 가져오려고 했다. 리액트에서 DOM에 직접 접근하기 위해 자바스크립트 코드를 쓰지말고 리액트에서 제공하는 useRef를 쓰는게 좋다는 코드 리뷰를 받았다. 

이유는 여러가지가 있지만,

1. id를 사용하는 리스크, 컴포넌트는 여러개의 인스턴스를 가질 수 있기 때문 = id가 중복될 수 있다.
 - JSX 안에서 DOM에 id를 달면 해당 돔을 렌더링할때 그대로 전달된다고 한다. 컴포넌트를 여러번 사용하면 돔에서 유일해야하는 id가 여러개 생기는 이슈가 생길 수 있다고 한다. 

2. ref를 사용하면 내가 정한 스코프에서만 접근할 수 있다. ref는 전역적으로 사용되지 않고 해당 컴포넌트 내부에서만 사용하기 때문에 1번의 문제가 해소된다. 

3. 디버깅이 어렵고, 유지보수가 어려울 수 있다고 한다! (왜지!)

 

그러나 DOM을 직접적으로 건드려야할때만 ref를 사용하는게 좋다고 한다.

스크롤 박스를 조작하거나, 특정 inpu에 포커스 줄때(? 흠), 캔버스에 그림 그리기 등 state를 사용하여 기능이 안되는 것들에서 사용하라고 권장한다. 

ref는 useEffect가 실행되기 전에 할당된다. 컴포넌트가 마운트 될 때 할당되며, 언마운트 될때 null을 할당한다. 

ref는 렌더링을 일으키지 않고 값을 변경시킨다. state는 값이 변하면 렌더링이 된다. ref는 값이 변해도 렌더링이 되지 않는다. 값을 가지고 오려면 ref.current로 DOM에 접근하여 값을 가지고 온다. 

state를 사용하는 컴포넌트를 제어 컴포넌트, ref를 사용하는 컴포넌트는 제어 컴포넌트라고 한다. 리액트에서는 제어 컴포넌트를 지향한다.  (나중에 비제어 컴포넌트 읽어보기)