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);

基本型)
userEffect()=>{「適用する機能」},[依存配列])
例1)→[count]を変更するとuserEffectが実行される
→コンソール内で無限ループ.
例2)→デフォルト値はuserState(1)から始まると前述したが、setCount(50)をuserState(1)に再割り当てし、setCount(50)のレンダリングをuserState(1)のレンダリング上に上書きする(50から)
例3)→ここでも[count]無限ループである.
→デフォルト値(1)が+1なので、1つずつ加算される無限ループが発生します.

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

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