Promise 는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다.

const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // Expected output: 123
});

Promise는 이벤트 루프의 순서가 어떻게 될까?

console.log('스크립트 시작');

setTimeout(() => {
  console.log('setTimeout 실행');  // 매크로테스크
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1 해결됨');  // 마이크로테스크
}).then(() => {
  console.log('Promise 2 해결됨');  // 마이크로테스크
});

console.log('스크립트 종료');

• ‘스크립트 시작’

• ‘스크립트 종료’

console.log('스크립트 시작');

setTimeout(() => {
  console.log('첫 번째 setTimeout 시작');

  Promise.resolve().then(() => {
    console.log('첫 번째 setTimeout 내의 Promise 해결');
  });

  console.log('첫 번째 setTimeout 종료');
}, 0);

Promise.resolve().then(() => {
  console.log('첫 번째 Promise 해결');

  setTimeout(() => {
    console.log('첫 번째 Promise 내의 setTimeout 실행');
  }, 0);
});

console.log('스크립트 종료');

Promise를 활용한 코드 예제

function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

const test = () => {
  setState((prev) => prev + 1);
  setState((prev) => prev + 1);
}

1. handleSubmit 호출 시작

• 사용자가 Update 버튼을 클릭할 때 이 함수가 호출됩니다. 이 시점에서 handleSubmit 함수가 콜 스택에 푸시됩니다.

2. setIsPending(true) 실행

• setIsPending 함수가 콜 스택에 푸시되고 실행됩니다. 이 함수는 내부적으로 React의 상태를 업데이트하여, 로딩 상태를 나타내는 UI를 활성화시킬 수 있습니다.

• setIsPending 함수의 실행이 완료되고 콜 스택에서 팝됩니다.

3. updateName(name) 호출

• updateName 함수가 콜 스택에 푸시됩니다. 이 함수는 비동기 함수로, 서버에 이름을 업데이트하는 HTTP 요청을 보낼 수 있습니다.

• 비동기 함수 updateName은 Promise를 반환하고, 네트워크 요청을 처리하는 동안 콜 스택에서 팝됩니다. 이 때, 네트워크 요청은 Web API 또는 브라우저의 백그라운드에서 처리됩니다.

4. 비동기 대기 (await updateName(name))

• await 키워드에 의해 updateName 함수의 Promise가 해결될 때까지 handleSubmit 함수의 실행이 일시 중단됩니다. 이 동안 다른 스크립트 실행이 가능해집니다.

5. updateName의 Promise 해결

• updateName의 네트워크 요청이 완료되고 결과가 Promise에 의해 반환됩니다. 이 결과는 error 변수에 저장됩니다.

• handleSubmit 함수의 나머지 부분이 콜 스택에 다시 푸시되어 실행을 재개합니다.

6. setIsPending(false) 실행

• setIsPending 함수가 다시 콜 스택에 푸시되어 실행됩니다. 이번에는 로딩 상태를 비활성화하는 역할을 합니다.

• 함수 실행 완료 후 콜 스택에서 팝됩니다.

7. error 체크 및 처리

• if (error) 조건문이 평가됩니다. 에러가 있으면 setError(error)가 콜 스택에 푸시되어 실행됩니다.

• 에러를 처리하고 사용자에게 피드백을 제공한 후, return 문에 의해 handleSubmit 함수에서 나옵니다.

8. redirect("/path") 실행

• 에러가 없는 경우, redirect 함수가 콜 스택에 푸시되어 실행됩니다. 이 함수는 사용자를 다른 경로로 리디렉션합니다.

• 함수 실행 완료 후 콜 스택에서 팝됩니다.

9. handleSubmit 종료

• handleSubmit 함수의 모든 실행이 완료되고, 콜 스택에서 팝됩니다.

어? 왜 같은 유저인데, 데이터가 두개가 있나요??

어? 세개나 있네요?

const Button = ({
  children,
  onClick,
  ...props
}: Props): JSX.Element => {
  const [isLoading, setIsLoading] = useState(false);

  const onClickHandler = (event: MouseEvent<HTMLButtonElement>) => {
    setIsLoading(true);

    Promise.resolve(onClick?.(event)).finally(() => {
      setIsLoading(false);
    });
  };

  return (
    <button disabled={isLoading} onClick={onClickHandler} {...props}>
      {children}
    </button>
  );
};

export default Button;

프로미스 기반 탭 컨트롤러

import React, { useState, useEffect } from 'react';

function TabController({ tabs }) {
  const [activeTab, setActiveTab] = useState(tabs[0].label);
  const [content, setContent] = useState('');

  useEffect(() => {
    const currentTab = tabs.find(tab => tab.label === activeTab);
    currentTab.content().then(setContent);
  }, [activeTab, tabs]);

  return (
    <div>
      <ul>
        {tabs.map(tab => (
          <li key={tab.label} onClick={() => setActiveTab(tab.label)}>
            {tab.label}
          </li>
        ))}
      </ul>
      <div>{content}</div>
    </div>
  );
}

// tabs를 다음과 같이 사용할 수 있습니다:
// const tabs = [
//   { label: 'Home', content: () => Promise.resolve('Home content') },
//   { label: 'Profile', content: () => Promise.resolve('Profile content') },
//   { label: 'Settings', content: () => Promise.resolve('Settings content') }
// ];