React useState의 콜백인자

 

콜백 인자에 대해 설명 하기 전에 useState 는 비동기적으로 값이 바뀐다.

아래 코드의 setCount2  아래에 console 에 값을 출력 해 보면 처음에 버튼 클릭 시 "0" 이 출력이 되고 두번째 클릭에는

"1" 이 출력이 된다.

 

 

첫번째 클릭 시 count work: 1 statecount2 : 0                                화면 출력값   state : 1

두번째 클릭 시count work: 1 statecount2 : 1                                  화면 출력값   state : 2

두번째 클릭 시count work: 1 statecount2 : 2                                 화면 출력값   state : 3

 

 

리액트 상태변수로 적용 된 count2 의 값은 함수 종료 후에 비동기 적으로 적용이 된다.

즉 App 컴포넌트가 모두 실행 되고 렌더링 시점에 변경된 내용이 적용이 된다.

 

일반 변수 인 count 값은 리렌더링 될 때 마다 let count=0 으로 인해  0 으로 초기화 된수 실행 된다.

const App = () => {
  let count = 0;
  const [count2, setCount2] = useState(0);
  const incrase = () => {
    count = count + 1;
    setCount2(count2 + 1);
    console.log("count work :", count, "statecount2:", count2);
  };
  return (
    <>
      <div>state:{count2}</div>
      <button onClick={incrase}></button>
    </>
  );
};

export default App;

 

🔥 React useState에서 set 함수의 콜백 인자는 무엇일까?

React에서 useState를 사용할 때, 상태를 업데이트하는 set 함수에 콜백 함수를 전달할 수 있습니다.
그렇다면, 이 콜백 함수의 인자로 전달되는 값은 무엇일까요? 🤔

✅ setState에 콜백을 전달하면?

setState 함수에 콜백 함수를 전달하면, 이전 상태 값(previous state) 을 인자로 받을 수 있습니다.

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

const handleIncrement = () => {
  setCount(prevCount => prevCount + 1);
};

 

위 코드에서 prevCount는 count의 이전 값(현재 상태 값) 입니다.
즉, setCount가 호출될 때마다 최신 상태를 기반으로 새로운 값을 계산하여 상태를 업데이트합니다.

⚡ 왜 콜백 방식이 필요할까?

React의 setState는 비동기적으로 동작하기 때문에, 상태 값이 즉시 업데이트되지 않을 수도 있습니다.
예를 들어, 아래와 같이 setCount(count + 1)을 여러 번 호출하면 원하는 만큼 증가하지 않을 수 있습니다.

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

const handleIncrementWrong = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
  console.log(count)//첫출력 0 
                    //두번째 1 
                    //세번쩨 2 
                         .
                         .
                         .
};

 

위 코드는 count가 변경되기 전에 여러 번 setCount(count + 1)이 실행되기 때문에, 최종적으로 1만 증가하는 문제가 발생할 수 있습니다.

 

✅ 하지만, 콜백 함수 방식을 사용하면 최신 상태를 기반으로 안전하게 값을 업데이트할 수 있습니다.

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

const handleIncrementCorrect = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  console.log(count)  // 첫출력  0 
  };                  // 두번째  3 
                      // 세번째  6 
                            .
                            .
                            .

 

이렇게 하면 prev가 매번 최신 상태 값을 반영하므로, 결과적으로 count가 3씩 증가하는 것이 보장됩니다! 🎯

🔎 정리

• setState에 콜백을 전달하면 이전 상태 값을 인자로 받을 수 있다.
• setState는 비동기적으로 동작하므로, 이전 상태를 기반으로 업데이트할 때는 콜백 함수를 사용하는 것이 안전하다.
• 여러 번 상태를 업데이트할 때는 콜백 방식을 사용하여 최신 상태를 보장하자!

 

 

---

 

🎯 useState에서 콜백 함수(() => 값)을 전달하면?

React에서 useState를 사용할 때, 초기값을 콜백 함수로 전달하면 어떤 차이가 있을까요?
처음 렌더링 시 불필요한 연산을 방지하고 성능을 최적화할 수 있는 방법을 알아봅니다.

---

✅ 기본적인 useState 사용 방법

일반적으로 useState는 다음과 같이 사용됩니다.

 

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

하지만, 만약 초기값을 계산하는 과정이 무겁다면?
useState의 인자로 콜백 함수를 전달하면 지연 초기화(lazy initialization) 를 할 수 있습니다.

---

🎯 useState(() => 초기값)의 동작 방식

const [count, setCount] = useState(() => {
  console.log("초기값 설정");
  return 0;
});

⏳ 실행 흐름

✅ 처음 렌더링될 때만 "초기값 설정"이 출력됨
✅ 이후 리렌더링 시에는 실행되지 않음
✅ count의 초기값은 0이 됨

📌 즉, 초기 상태 값을 설정하는 함수가 처음 한 번만 실행되고, 이후에는 재평가되지 않습니다.

---

🚀 useState에서 콜백을 사용해야 하는 경우

📌 초기 상태를 계산하는 비용이 크다면?
아래처럼 초기값이 배열, 객체, API 호출처럼 무거운 연산이라면 콜백을 활용하는 것이 좋습니다.

const [items, setItems] = useState(() => {
  console.log("초기 데이터 생성...");
  return Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
});

🎯 차이점

✔ useState(초기값) → 매 렌더링 시 초기값이 평가될 수 있음
✔ useState(() => 초기값) → 처음 렌더링 시에만 실행됨 (성능 최적화)

---

🚨 실수하기 쉬운 부분

❌ 잘못된 예제 (콜백이 아닌 즉시 실행 코드)

const [count, setCount] = useState(console.log("실행됨") || 0);

 

❌ 이렇게 하면 console.log("실행됨")이 즉시 실행된 후 0이 초기값이 됩니다.
즉, 렌더링될 때마다 실행되므로 의미가 없습니다.

✅ 올바른 방법

const [count, setCount] = useState(() => {
  console.log("초기 실행");
  return 0;
});

✔ 처음 렌더링될 때만 실행됨

---

🔥 정리

방식초기값 계산 실행 시점성능 최적화

useState(값)	매 렌더링 시 값이 평가됨	❌
useState(() => 값)	처음 렌더링될 때 한 번만 실행	✅

✅ 초기값을 계산하는 비용이 크다면, useState(() => 값) 형태로 사용하자!
✅ 불필요한 연산을 줄여 성능 최적화 가능!