React.useEffect()

useEffect

Reactは、レンダリング後に実行すべきアクションを示します.
これは、ライフサイクル(life-croycle)が素子にも使用できることを意味する.
useStateと同様に複数回使用できます.

useEffect(function, deps)

function:実行するアクション

deps:配列の形式で、配列でチェックする特定の値または空の配列を使用できます.

depsを省略すると、レンダリングのたびにuserEffect関数が呼び出されます.

import React, { useEffect } from 'react';

useEffect(() => {
 console.log('렌더링 될 때마다 실행') 
})

depsが空の配列の場合:userEffect関数は、最初のレンダリング時にのみ呼び出されます.

useEffect(() => { 
  console.log('마운트 될 때만 실행'); 
}, []);

depsが特定の値である場合:userEffect関数は、特定の値が更新(変更)された場合にのみ呼び出されます.

useEffect(() => { 
  console.log('특정 값이 업데이트 될 때만 실행'); 
}, [특정 값]);

useStateとともに使用

構成部品の内部にuserEffectを作成します.
ステータス変数にアクセスできます.
次の例は、レンダリングするたびにuserEffectとして機能します.

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `버튼클릭 ${count} 번 되었습니다!`;
  });

  return (
    <div>
      <p>버튼 클릭 : {count} 번</p>
      <button onClick={() => setCount(count + 1)}>
        클릭해주세요
      </button>
    </div>
  );
}

特定のステータスが変更された場合にのみ使用

次の例では、countが変更された場合にのみEffectを使用します.

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `버튼클릭 ${count} 번 되었습니다!`;
  },[count]);

  return (
    <div>
      <p>버튼 클릭 : {count} 번</p>
      <button onClick={() => setCount(count + 1)}>
        클릭해주세요
      </button>
    </div>
  );
}

複数使用userEffect

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("Elina");

  useEffect(() => {
    console.log("렌더링 될때마다 실행되는 함수");
  });

  useEffect(() => {
    console.log("처음 한 번만 실행되는 함수");
  }, []);

  useEffect(() => {
    console.log("카운트 값이 업데이트 될 때만 실행되는 함수");
  }, [count]);

  useEffect(() => {
    console.log("이름이 바뀌었을 때만 실행되는 함수");
  }, [name]);

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

  const handleChangeName = () => {
    setName("윤정이");
  };
  return (
    <div>
      <button onClick={handleAddCount}>카운트증가</button>
      <button onClick={handleChangeName}>이름 바꾸기</button>
      <h1>{count}</h1>
      <h1>{name}</h1>
    </div>
  );
}

最初のページのレンダリング

増加あたりの数

[名前を変更](Rename)をクリックします.