useRef를 알아보자

이해한 내용대로 적어본다

• useState : state가 변하면 해당 부분을 다시 로드한다
• useEffect : 컴포넌트가 로드될때마다 실행된다
• useRef : 컴포넌트 로드와 상관없이 고유한 값을 가지고 있는다
• var,let등 변수 : 컴포넌트가 로드될시 초기화된다

이런 특성들 때문에

const [count, setCount] = useState(0)

useEffect(()=>{
	setCount(count+1);
});

위처럼 작성하면 Maximum err가 발생하면서 무한루프에 빠지게 된다

이럴때 useRef를 활용해서

const countRef = useRef(0);
const [count, setCount] = useState(0)
useEffect(()=>{
	countRef.current = countRef.current+1;
  	console.log("countRef :",countRef.current);
});

<h1>{count}</h1>
<h1></h1>
<buttton onClick={setCount(count+1)}>카운트</button>

위처럼 적고 버튼을 클릭하면

1.카운트 스테이트가 증가한다
2.state의 변화로 useEffect가 실행된다
3.countRef의 값이 증가한다. state가 변했기때문에 컴포넌트는 재로드된다
4.컴포넌트가 로드되면서 countRef의 값이 증가하지만, 무한루프는 발생하지않는다.

이처럼 컴포넌트 초기화의 영향을 받지 않으면서, state를 쓸 수 없을때엔
useRef를 쓰도록 하자