DOM에 이름달기
일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.
<div id="my-element"></div>
특정 DOM요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.
이처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법은 바로
ref(reference) 개념이다.
리액트 컴포넌트 안에서는 id 사용을 지양하는 이유?
id는 해당 요소의 고유한 존재인데 컴포넌트를 재사용하면 고유하지 않은 요소가 되어 버린디다. 이는 잘못된 사용이다.
ref는 전역적으로 작동하지 않고도 원하는 기능을 구현할 수 있다. 하지만 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 수 있기에 컴포넌트를 만들 때마다 id 값에 번호를 매기든 약간의 차이를 두어야 한다.
🛼 ref는 왜 사용할까?
ref를 반드시 사용해야 하는 상황은 어떤 상황인지 알아보자
DOM을 꼭 직접적으로 건드려야 할 때
예를 들어,
-
특정 input에 포커스 주기
-
스크롤 박스 조작하기
-
Canvas 요소에 그림그리기 등
이때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데 이를 위해 ref를 사용한다.
📍 컴포넌트에 ref 달기
리액트에서는 컴포넌트에도 ref를 달 수 있다.
주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용한다.
<MyComponent ref={ref}/>
📍 스크롤 이벤트에서 DOM노드가 가진 값들
-
scrollTop : 세로 스크롤바 위치(0-35)
-
scrollHeight : 스크롤이 있는 박스 안의 div 높이(650)
-
clientHeight : 스크롤이 있는 박스의 높이(300)
🛼 정리
추후 Hook을 배우면 useRef로 쉽게 ref를 사용할 수 있다.
컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref를 사용한다.
하지만 꼭 필요하지 않은 경우에는 사용하지 않는 것을 권장한다.
서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 잘못된 사용이다.
컴포넌트에 ref를 달고 그 ref를 다른 컴포넌트로 전달할 수 있다. 하지만 이 방법은 리액트 사상에 어긋난 설계이다.
앱 규모가 커지면 엄청 꼬여서 유지 보수가 어렵다.
컴포넌트끼리 데이터를 교류할 때는 언제난 데이터를 부모->자식 방향으로 흐름을 교류해야 한다.
아하! 그래서 스크롤할 때 ref를 custom hook으로 뺐을 때 에러가 났군
ref 훅을 부모에서 정의하고 자식에게 넘겨주는 것이 리액트의 흐름에 맞는데 ref 훅을 custom hook으로 따로 빼서 다른 컴포넌트에게 그 값을 넘겨주려니 인식을 못하더라... 데이터 흐름 방향은 언제난 부모에서 자식으로
리덕스나 context API를 사용하기 전까지는...
