[React] useState + Callback

26436 ワード
React TIL テキストリンク
useStateの使い方!
const [state, setState] = useState(initialValue) // useState를 사용하여 state, setState를 선언한다.
const stateHandler = () =>{ // setState를 사용하여 값을 업데이트 한다.
  setState(newValue)
}
そのまま使いました!
でも、CallBack関数も使えます!

関数をinitialstateに渡す場合


initialstateで特定の関数の実行戻り値を指定した場合。


関数を実行すると、戻り値がuserStateの初期値として指定されます。

export default function UseState(){
  const [count, setCount] = useState(initialData()); //count의 초기값은 initialData함수 실행 결과 반환값인 0

  function initialData(): number {
    console.log('초기값 반환 함수 실행');
    return 0;
  }

  return (
    <Container>
      <P>count : {count}</P>
      <Button onClick={() => setCount(count + 1)}>Count+</Button>
      <code>setCount(count+1)</code>
    </Container>
  );
}

レンダーするたびに初期値を返す関数を実行する必要はありません!?


初期値を指定した後、初期値戻り関数を再実行しても意味がありません.❗️
➪初期値を1回のみ実行するために関数を指定し、コールバック関数として関数を使用します.

関数をinitialstateにcall形式で渡します。

export default function UseState(){
  const [count, setCount] = useState(() => initialData()); // callback 함수 형태로 전달, 
  // const [count, setCount] = useState(initialData) // 동일
  

  function initialData(): number {
    console.log('초기값 반환 함수 실행');
    return 0;
  }

  return (
    <Container>
      <P>count : {count}</P>
      <Button onClick={() => setCount(count + 1)}>Count+</Button>
      <code>setCount(count+1)</code>
    </Container>
  );
}

再レンダリングしても、初期usStateに渡される関数は再実行されません!


📌 useStateの初期値である関数実行結果を使用して値を返すと、CallBack関数として結果が渡され、非効率な関数実行が阻止される可能性があります.CalBack関数の論理が複雑であればあるほど効率的である.

1つのhandlerでsetStateを2回呼び出します。


値をsetStateに直接渡す

export default function UseState1() {
  const [count, setCount] = useState(() => initialData());

  function initialData(): number {
    return 0;
  }

  const dualCal = () => {
      console.log(count);
      setCount(count * 2);
      console.log(count);
      setCount(count + 1);
  };
  return (
    <Container>
      <P>count : {count}</P>
      <Button onClick={() => setCount(count + 1)}>Count+</Button>
      <code>setCount(count+1)</code>
      <br />
      <Button onClick={dualCal}>Count *2 +1 </Button>
        <code>
          setCount(count * 2) <br />
          setCount(count + 1)
        </code>
    </Container>
  );
}

イベント実行時、最後のsetStateのみが機能します


同じsetStateが1つのイベント関数で複数回実行されても、最後のsetStateのみが実行されます.❗️
ただし、パラメータとしてPrevStateを受信したCallback関数をsetStateに渡すと、問題を解決できます.

Calback関数をsetStateに転送

export default function UseState1() {
  const [count, setCount] = useState(() => initialData());

  function initialData(): number {
    return 0;
  }

  const dualCal = () => {
      setCount((pre) => { // setState에 Callback 함수를 사용하면 첫번째 인자로 이전 state 값을 전달받는다.
        console.log(pre);
        return pre * 2;
      });
      setCount((pre) => {
        console.log(pre);
        return pre + 1;
      });
  };
  return (
    <Container>
      <P>count : {count}</P>
      <Button onClick={() => setCount(count + 1)}>Count+</Button>
      <code>setCount(count+1)</code>
      <br />
      <Button onClick={dualCal}>Count *2 +1 </Button>
        <code>
          setCount((pre) =&gt; pre * 2) <br />
          setCount((pre) =&gt; pre + 1)
        </code>
    </Container>
  );
}

setStateは順番に実行します!


📌 同じsetStateを1つのイベント関数で複数回実行する場合は、Calbak形式を使用します.
簡単な画像処理
[SQL Runday] HackerRank Weather Observation Station 5