[TIL] useState와 useRef

 

 

import { useState, useRef } from 'react';

function App() {
	const [count, setCount] = useState(0);
	const refCount = useRef(0);

	const plusCountHandler = () => {
		setCount(count + 1);
	};


	return (
		<>
			<h1>UseState 카운트 : {count}</h1>
			<button onClick={plusCountHandler}>숫자 1 증가</button>
			<br />
			<h1>UseRef 카운트 : {refCount.current}</h1>
			<button
				onClick={() => {
					refCount.current = refCount.current + 1;
					console.log(refCount.current);
				}}
			>
				+
			</button>
		</>
	);
}

export default App;

 

 

• useState

useState는 컴포넌트의 상태를 관리하고 값이 변경될 때마다 변화가 일어나 컴포넌트가 리렌더링이 되고 UI가 갱신된다.  함수가 다시 그려지니 내부 변수들은 초기화가 된다.그래서 state는 리렌더링이 꼭 필요한 값을 다룰 때 쓸 수 있다. 물론 다시 리렌더링되는 것에 메모리나 비용적으로 useRef보다 비효율적인 면도 있지만 값을 그때그때 확인할 수 있는 것과 또한 React 공식문서에서 form 요소는 사용자 입력에 따라 상태가 변경되는 경우가 많기 때문에 효과적으로 입력값의 상태를 간편하게 관리할 수 있는 useState를 사용하길 권장한다.

 

 

 

• useRef

useRef에 저장한 값이 바뀌더라도 리렌더링이 일어나지 않는다. 그래서 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있다.useRef는 DOM 요소에 직접적으로 접근할 수 있다. 포커스를 설정하고자 할 때 해당 DOM 요소에 참조를 만들고 .current property를 통해 직접 해당 DOM 요소에 접근한다. useRef는 리렌더링을 발생시키지 않는 값, 내부적으로 안봐도 되는 값을 저장할 때 사용된다. 렌더링 되자마자 특정 해당 DOM을 사용하면 된다.