useState와 useRef
useState와 useRef의 가장 큰 차이점은 렌더링이다.
- useState : 컴포넌트에 상태 변수를 추가할 수 있는 훅
- useRef : 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 훅
- 참조를 변경해도 다시 렌더링이 트리거되지 않음
useState
const [변수, 세터] = useState<타입>(초깃값);- 변수는 read-only므로, 변경은 반드시 세터를 이용
- 변수가 객체(참조)형이면 spread 연산자로 사본을 만들어 할당
- 해당 상태를 소유하지 않은 컴포넌트에서는 props
- react-dom’s flushSync는 동기로 DOM 갱신(화면 그려지고 난 후에 처리하고 싶을 때)
- React 18.2부터는 Promise/Timeout/EventHandler 내에서 여러 상태를 변경해도 batch-render(한 번만 re-rendering됨)
- 부모로 상태를 전달하기 위해서는 부모에서 자식으로 접근자 함수를 전달
useRef
-
render/paint와 무관한 상태 참조
-
직접 DOM에 접근할 때 또는 데이터를 담을 때 사용
const xRef = useRef(); // -> <span ref={xRef}>...</span> <input type='text' ref={xRef} /> <MyComponent ref={xRef} /> // -> xRef.current.[value, focus, …] //⇐ 해당 DOM의 속성 -
useRef로 컴포넌트 외부(자식children)의 DOM 접근 가능
-
But, 외부 DOM을 참조하는 ref를 갖는 것은 Coupling이 강해져 좋지 않다!
useState와 useRef
- 화면의 빈번한 렌더링을 줄이기 위해 useRef를 사용
- 성능 개선됨 (80%이상은)
- ref는 form의 onSubmit에 유리함
클래스형 컴포넌트와 함수형 컴포넌트에서의 ref
- 클래스형 컴포넌트 : createRef를 사용
- 함수형 컴포넌트 : createRef와 useRef 둘 다 사용 가능
React.createRef: 리렌더링 될때마다 ref 값이 초기화(null)React.useRef: 함수가 리렌더링 되어도 ref가 null로 초기화 되지 않음 (ref 값이 다시 재생성되지 않음)