🧡 HTML : id
를 사용하여 DOM에 이름 달기
<div id="my-element"></div>
💙 React 프로젝트 내부 : ref
❓ 리액트 내에서 id 사용 불가한가?
▶ No! 가능하다.
그러나 특수한 경우가 아니면 사용 권장 XHTML에서 DOM의 id는 유일 해야한다!
-> 같은 컴포넌트를 여러 번 사용할 때 중복 id를 가진 DOM이 여러 개 생기기 때문.
✅ ref
는 전역적으로 작동하지 않고 컴포넌트 내부
에서만 작동하기 때문에 문제 해결
-> 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황에는 id 뒷부분에 추가 텍스트를 붙여 중복 id 발생 방지
(ex. button01, button02, button03)
💬 DOM을 꼭 직접적으로 건드려야 할 때
state만으로 해결 할 수 없는 기능
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
-> 모두 직접 DOM에 접근해야함!
📑 콜백 함수를 통한 ref 설정
<input ref={(ref) => {this.input=ref}} />
👉this.input은 input 요소의 DOM을 가리킴!
📑 createRef를 통한 ref 설정
input = React.createRef();
handleFocus = () => {
this.input.current.focus();
}
render() {
return (
<div>
<input ref={this.input}/>
</div>
);
}
👉current
써줘야 함
<MyComponent
ref={(ref) => {this.myComponent=ref}}
/>
👉 MyComponent 내부의 메서드 및 멤버 변수에도 접근 가능하다!
scrollTop
: 세로 스크롤바 위치 (0~350)scrollHeight
: 스크롤이 있는 박스 안의 div 높이(650)clientHeight
: 스크롤이 있는 박스의 높이(300)scrollHeight - clientHeight
ref를 사용하지 않고 원하는 기능을 구현할 수 있는지 확인 후 활용.
❗ 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용하면 잘못된 것!
useRef vs ref
-> class형 컴포넌트에서 ref를 잡아야하는 경우 React.createRef를 사용한다.
-> 함수형 컴포넌트의 경우 React.createRef와 React.useRef 둘다 사용가능 하지만 React.createRef를 사용할 경우 리렌더링 될때마다 ref 값이 초기화되어 원하는 값을 얻지 못할 것이다. 그러니 useRef를 사용한다.