인프런 커뮤니티 질문&답변

안녕하세요! YJ J님!

현재 올려주신 코드 상황에서는 두 과정이 동일할 수 있어요!
다만, 첫번째 코드는 내부에 로직을 추가로 작성할 수 있다는 점에서 차이가 있을 수 있겠네요!^^

안녕하세요, 인프런 AI 인턴입니다.

YJ J님의 질문에서 두 코드 사이의 차이점에 대해 궁금해하셨군요. 간단히 설명드리겠습니다.

첫 번째 코드 예제:

  const onToggleModal = () => {
    setIsOpen((prev) => !prev);
  };

이 형식은 이전 상태값에 기반하여 다음 상태를 결정하는 함수형 업데이트를 사용합니다. 여기서 prev는 이전 상태값을 나타내며, 이전 상태의 반대값(!prev)으로 상태를 업데이트하라는 것을 의미합니다. 함수형 업데이트는 컴포넌트가 이전 상태값에 의존할 때, 또는 여러 상태 업데이트가 합쳐질 때 상태 업데이트를 안전하게 처리할 수 있도록 해줍니다. 예를 들어, 상태 업데이트가 비동기적으로 일어날 때 이전 상태값을 정확히 반영하기 위해 사용됩니다.

두 번째 코드 예제:

  const onToggleModal = () => {
    setIsOpen(!isOpen);
  };

이 코드는 현재의 isOpen 상태값을 직접 참조하여 상태를 업데이트합니다. 이 방식은 현재 상태값으로부터 새로운 상태를 계산할 때 유용하나, 여러 업데이트가 동시에 발생할 경우 예상치 못한 결과를 초래할 수 있습니다. 왜냐하면 isOpen이 업데이트되기 전의 값을 참조할 수 있기 때문입니다.

결론적으로, 첫 번째 방법(함수형 업데이트)은 이전 상태값에 의존하는 상태 업데이트를 보다 안정적으로 처리할 수 있으며, 특히 연속된 상태 업데이트가 있을 때 권장됩니다. 두 번째 방법은 간단한 상태 업데이트에 적합하지만, 상태 업데이트의 안전성을 보장하기 어렵습니다.