ReactJS Ref 101
5.ref 101 from Daniel Lim
임광규
ref는 언제 사용할까?
DOM을 꼭 직접적으로 접근할때 입니다.
언제 직접 접근 하나요?
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
id로 접근하면 안되요?
리액트에서도 id를 사용할수 있습니다. JSX 안에서 DOM에 id를 할당하면 랜더링될때 그대로 전달 됩니다. 하지만 특수한 경우가 아니면 권장하지 않습니다.
HTML DOM의 id는 유일(unique)해야 하는데, 여러 컴포넌트를 사용하면 중복 id를 가진 DOM이 생겨날 수 있습니다.
하지만 ref는 전역적으로 동작하지 않고 컴포넌트 내부에서만 동작하기 때문에 이런 문제가 생기지 않습니다.
ref 사용
useRef를 이용해서 생성 후 DOM에 ref 에 할당 처리 ```js import React from ‘react’;
export default function App() { const nameRef = React.useRef();
return ( <div className="App"> <input type=”text” ref={nameRef} /> <button onClick={e=>{ nameRef.current.focus(); }}>Input Focus</button> </div> ); ``` —
주의할 점!
컴포넌트 내부에서 DOM에 직접 접근시 ref를 사용합니다.
하지만 컴포넌트끼리 데이터를 교류할때 ref를 사용하면 안됩니다!
리액트 사상에 어긋난 설계이며, 앱 규모가 커지면 스파게티처럼 데이터고 꼬여 버려서 유지보수가 어려워집니다.
컴포넌트간 데이터 교류는 언제나 데이터를 부모 <-> 자식 흐름으로 교류 해야 합니다.