<TIL> 0726_01) useRef , useEffect

useState, useRef, useEffect 등 use~로 시작하는 것들은 모두 react에서 불러온다.
ex) import { useState, useEffect, useRef } from 'react';

1. useRef

: 특정 태그를 조작하기 위해 선택할 때 사용하는 도구.
: 태그를 변수에 담아서 변수로 컨트롤한다.
( getElementbyid 이런거 귀찮게 안해도 useRef면 됨 )
: ex) input태그 의 커서를 깜빡이도록 하는 것 등

---

2. useEffect

: 컴포넌트가 그려진 이후에 실행되는 것. (대체로,,, 일반적으로 화살표 함수이다.)
: 가급적 setState 사용을 피한다.
why? ) setState의 변경되는 값이 useEffect의 [ 의존성배열 ]에 들어가있으면 무한루프에 들어가게 된다. ex) count

작성예시)

import { useEffect, useState } from 'react';

export default function UseEffectPage() {
	const [count, setCount] = useState(1);

기본형)
useEffect( ( ) => { '적용할 기능' } , [ 의존성 배열 ] )

---

예제 1)→ [count] 변경되면 useEffect 실행됨
→ console 안에서 무한루프 됨.

---

예제 2) → 이미 위에서 기본값을 useState(1)에서 시작한다고 해뒀는데 , setCount(50)로 다시 줘서 useState(1)의 렌더링 위에 setCount(50)의 렌더링이 덮어씌워지게 됨 ( 50부터 시작 )

---

예제 3)→ 여기도 [count]하면 무한루프 됨.
→ 기본값(1)에 +1 이므로, 1씩 더해지는 무한루프 발생.

---

function onClickCount() {
    setCount((prev) => prev + 1);
  }

  return (
    <>
      <div>컴포넌트입니다.</div>
      <div>카운트 : {count} </div>
      <button onClick={onClickCount}>카운트 + 1</button>
    </>
  );
}

---