0726_01) useRef , useEffect
2568 ワード
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>
</>
);
}Reference
この問題について(0726_01) useRef , useEffect), 我々は、より多くの情報をここで見つけました https://velog.io/@park0eun/TIL-0726-useRef-useEffect-클래스-컴포넌트를-함수형-컴포넌트로-변경하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol