5.ref 101

ref101
임광규
2020.ReactJS 1

ref는언제사용할까?
DOM을꼭직접적으로접근할때입니다.
언제직접접근하나요?
특정input에포커스주기
스크롤박스조작하기
Canvas요소에그림그리기등
2020.ReactJS 2

id로접근하면안되요?
리액트에서도id를사용할수있습니다.JSX안에서DOM에id를할당하면랜더링될때그대로
전달됩니다.하지만특수한경우가아니면권장하지않습니다.
HTMLDOM의id는유일(unique)해야하는데,여러컴포넌트를사용하면중복id를가진DOM이생
겨날수있습니다.
하지만ref는전역적으로동작하지않고컴포넌트내부에서만동작하기때문에이런문제가생기지않
습니다.
2020.ReactJS 3

ref사용
useRef 를이용해서생성후DOM에ref에할당처리
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>
);
2020.ReactJS 4

주의할점!
컴포넌트내부에서DOM에직접접근시ref를사용합니다.
하지만컴포넌트끼리데이터를교류할때ref를사용하면안됩니다!
리액트사상에어긋난설계이며,앱규모가커지면스파게티처럼데이터고꼬여버려서유지보수
가어려워집니다.
컴포넌트간데이터교류는언제나데이터를부모<->자식흐름으로교류해야합니다.
2020.ReactJS 5

5.ref 101

More Related Content

What's hot (9)

More from Daniel Lim (20)

5.ref 101