[React] 상태 직접 업데이트 vs 콜백 함수 사용 비교

상태 직접 업데이트 vs 콜백 함수 사용 중 어떤게 더 효율적일까 궁금해졌다!

• 상태 직접 업데이트

  • setState(newValue)를 호출할 때 newValue가 이전 상태값에 의존하지 않는 경우 사용한다.

• 콜백 함수 사용

  • setState(prevState => newValue) 형태로 사용되며, prevState는 현재의 상태를 참조한다.
  • 이전 상태값을 기반으로 새 상태를 할당할 때 사용한다.
    
    

  function AddForm({ setLetters, activeTab }) {
  const [nickname, setNickName] = useState("");
  const [content, setContent] = useState("");
  
  const onAddLetter = (e) => {
  ...
    const newLetter = {
      id: uuid(),
      createdAt: new Date().toString(),
      nickname,
      avatar: null,
      content,
      writedTo: activeTab,
    };
    setLetters([...letters, newLetter]); // 상태 직접 업데이트
    setLetters((prev) => [...prev, newLetter]); // 콜백 함수 사용
  
    setNickName("");
    setContent("");
  };
  }
  

  ➡️ 결론부터 말하면, 콜백 함수를 사용하는 것이 더 좋다고 한다.

콜백 함수를 사용하는 이유

• 배치 업데이트
  • React는 여러 상태 업데이트를 배치로 처리하여 여러 setState 호출이 동시에 일어나더라도 이를 모아서 한 번에 처리함으로써 렌더링 횟수를 최소화하고 성능을 향상시킨다.
  • 따라서, setState를 호출하더라도 상태가 즉시 업데이트되지 않을 수 있다. -즉, 연속적인 상태 업데이트가 필요한 경우, 콜백 함수를 사용하는 것이 안전하다.
    
    
• 안정성 보장
  • 콜백 함수를 사용하면, 업데이트가 실행될 때 가장 최근의 상태값을 받아온다.
  • 따라서 동시에 여러 상태 업데이트가 일어나는 경우에도 정확한 값을 보장한다.

배치 업데이트 예시

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

setCount(count + 1); // count(0) + 1은 1, 1로 만드는 중...
setCount(count + 1); // 윗 줄의 상태 변경이 안 끝나서 아직 count는 0, count(0) + 1은 1, 1로 만드는 중...
setCount(count + 1); // 윗 줄과 윗윗줄의 상태 변경이 안 끝나서 아직 count는 0, count(0) + 1은 1, 1로 만드는 중...

// count = 1

1. setState 를 호출함과 동시에 많은 프로세스가 실행
2. 예를 들어 가상 DOM을 비교하고 리렌더링까지 ⇒ 렌더링 사이클
3. 렌더링 사이클이 끝나기 전에 다른 코드에서 상태를 변경하게 되면 해당 작업은 무시된다.

이러한 이유 때문에 나는 앞으로의 프로젝트에서 콜백 함수를 사용하는 방식을 채택할 것이다! 🎯