[useEffect]飛び出した人を時々寝かせましょう

Mount、Update、およびUnmountを実行する場合は、特定のタスクのみを実行します.

SideEffect(外部環境の影響を受ける)を望んでいない場合は、それを処理します.

userEffectの使用
Mount

useEffect(() => { ..//원하는 작업 내용})
useEffect hook은 기본적으로 callback 함수를 인자로 받는다.

callback 함수?
다른 함수의 인자로 전달된 함수

1.

useEffect(() => {
		//어쩌구저쩌구작업..
});

1번 → 인자로 callback 함수를 받고 끝!
:component가 렌더링 될때마다, 매번 callback이 실행됨
맨 처음 화면에 렌더링 될 때, 다시 렌더링이 될 때 마다 매번

2.

useEffect(() => {
	//어쩌구작업..
}, [value]);

2번 → 첫번째 인자로는 callback 함수, 두번째 인자로는 배열을 받는다!
:화면에 첫 렌더링 될 때, value 값이 바뀔 때만
만약 배열이 비어있다면, 화면에 첫 렌더링 될 때 딱 한번!

Update

import React, { Component, useEffect, useState } from 'react';

function App() {
  const[count, setCount] = useState(1);

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

  //1번! 렌더링 될 때마다 매번 실행됨
  useEffect (() => {
    console.log('렌더링맨~')
  })

  return (
    <div>
      <button onClick={handleCount}>Update</button>
      <span>count: {count}</span>
    </div>
  );
}
export default App;
 
Update button을 누르면, 누를 때마다 handleCount가 실행되고,
실행이 되면 setCount를 통해 변수 count의 값이 바뀐다.
값이 바뀔 때마다 component는 다시 렌더링되어 console에 렌더링맨~이 찍힌다.

文字の変化を考えたらどうなりますか?

글자도 한번 보자
import React, { useEffect, useState } from 'react';

function App() {
  const[count, setCount] = useState(1);
  const[name, setName] = useState('');

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

  const handleInputChange = (e) => {
    setName(e.target.value)
  }

  //렌더링 될 때마다 매번 실행됨
  useEffect (() => {
    console.log('렌더링맨~')
  })

  return (
    <div>
      <button onClick={handleCount}>Update</button>
      <span>count: {count}</span>
      <input type="text" value={name} onChange={handleInputChange}></input>
      <span>name: {name}</span>
    </div>
  );
}
export default App;

inputラベルに値を書くと、onChangeでイベントが検出され、handleInputChangeが有効になります.
useState関数setNameが動作します.
value={name}、すなわちsetName(e.target.{name})
単語を入力するたびに、コンポーネントが再レンダリングされます.
1文字書いても更新でcountを増やしても、コンソールに印刷されます.
もしそうなら、コンソールなら.もし中がlog()ではなく重いものだったら?効率的ですか??
1文字入力するたびに関数が呼び出されるのは効率的ではありません.
私はcountに呼び出されることを望んでいます!!→2通り目で並びます!!

//마운트 + [item] 변경될 때마다 실행
useEffect (() => {
    console.log('렌더링맨~')
  }, [count])

このように書くと、最初にスクリーンを描いたときに、2番目のパラメータの配列値が変化したときにcallback関数が呼び出されます!
この関数をアンインストールするときに動作を停止してください.
CleanUp

//App.js

import React, { useEffect, useState } from 'react';
import Timer from './component/Timer';

function App() {
  const [showTimer, setShowTimer] = useState(false);

  return (
    <div>
      {showTimer && <Timer />} 
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
} // showTimer가 true일 때만 Timer를 보여준다
export default App;

// ./component/Timer.js
import React, {useEffect} from 'react';

const Timer = (props) => {
    useEffect(() => {
        const timer = setInterval(() => {
            console.log("째깍");
        }, 1000);

        return () => {
            clearInterval(timer);
            console.log("타이머 종료!");
        } // useEffect 함수를 unmount 할 때. 
					//정리하고싶을 때 return에 함수를 넣으면 됨
    }, []);

    return(
        <div>
            <span>타이머를 시작합니다</span>
        </div>
    );
}

export default Timer;

動作中のuserEffectに値を返して関数とすればいい!
cleanUp!
Timerコンポーネントが初めて画面にマウントされると、UserEffect内部のsetInterval関数が返され、1秒ごとに「滴下」と記録されます.
App.js上のボタンのイベント検出呼び出し関数→クリック時にfalseとtrueを繰り返し、true時にのみtimer&&logをマウントします.
空の配列をコミットしても、クリーンアップコードを作成することをお勧めします.
使うときは別のcompoに回して、また戻ってくるときは、これで1つ増えるかもしれませんが、積み上げられてしまうので、ぜひ使ってみてください.
スターコードのReact Hooksシリーズを見て整理するために作られました!