[React] useState + Callback

홍인열·2022년 4월 4일

useState를 사용하는 법!
const [state, setState] = useState(initialValue) // useState를 사용하여 state, setState를 선언한다.
const stateHandler = () =>{ // setState를 사용하여 값을 업데이트 한다.
  setState(newValue)
}
이렇게 사용했다!
하지만, CallBack 함수를 이용한 사용도 가능하다는거!!

initialState에 함수를 전달할때

initialState에 특정 함수 실행 반환값을 지정할 때

함수를 실행시켜 반환값을 useState 초기값으로 지정하는 경우

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

렌더시마다 초기값을 반환하는 함수가 불필요하게 계속 실행된다!?

초기값이 지정된후에는 초기값 반환함수가 다시 실행되는건 아무 의미가 없다.❗️
➪ 초기값 지정 함수를 한번만 초기에 한번만 실행시키기 위해서는 함수를 콜백함수형태로 사용한다!

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

리렌더가 되더라도 초기 useState에 전달된 함수는 재 실행되지 않는다!

📌 useState의 초기값으로 함수 실행 결과 반환값을 사용한다면 CallBack함수 형태로 전달해준다면 비효율적인 함수 실행을 막을 수 있다. 이는 CallBack함수 로직이 복잡 할 수록 더욱 효율적인 코드가 된다.

하나의 handler에서 setState를 두번 호출 할때

값을 직접 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가 여러번 실행되더라도 마지막 setState만 실행되도록 되어있다.❗️
➪ 하지만 PrevState를 인자로 받는 Callback 함수를 setState에게 전달하면 문제를 해결할 수 있다.

Callback 함수를 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>
  );
}