Callback

콜백함수란?

MDN에선 다음과 같이 정의한다.

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

 

콜백 함수는 다른 함수에 인자로서 건네지는 함수로, 외부 함수에서 어떤 처리나 액션을 수행한다.(인자 내부에 함수를 넣어서 처리하거나 액션을 수행할 수도 있다.

 

= 콜백 함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것을 의미합니다

 

특징: 다른 코드의 인자로 넘겨줌으로써 제어권 또한 위임

즉, 콜백 함수 호출 시점의 권한이 개발자에게 있는 것이 아니라
제어권을 넘겨받은 코드에게 있다

 

 

콜백에는 동기콜백과 비동기 콜백이 있다.

 

동기콜백

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

 

비동기 콜백의 경우,  콜백은 비동기 명령이 완료된 후에 이어서 코드가 실행된다. 비동기 콜백 함수의 좋은 예는 Promise가 성공하거나 실패한 후에 체인되는 .then() 블록 안에서 실행되는 것이며, 이러한 구조는 fetch()와 같은 모던한 web API에서 많이 사용된다.

 

비동기콜백 promise 예제(이게 비동기콜백 예제가 맞나? 그냥 promise예제아닌가?)

const Login = ({ authService }) => {
  const navigate = useNavigate();
  const goToMaker = (userId) => {
    navigate(
      '/maker',
      { state: {id: userId} });
  }


//비동기콜백 promise
  const onLogin = (event) => {
    authService
      .login(event.currentTarget.textContent)
      .then(data => goToMaker(data.user.uid))  
      .catch((error) => {
        console.log(error)
      });
  }

  useEffect(() => {
    authService
      .onAuthChange(user => {
        user && goToMaker(user.uid);
      })
  })

  return (
    <section>
      <Header />
      <section className={styles.login}>
        <h1>Login</h1>
        <ul className={styles.list}>
          <li className={styles.item}>
            <button className={styles.button} onClick={onLogin}>Google</button>
          </li>
          <li className={styles.item}>
            <button className={styles.button} onClick={onLogin}>Github</button>
          </li>
        </ul>
      </section>
      <Footer />
    </section>
  )
}

//이하 AuthService 관련부분만 추가
class AuthService {
  constructor() {
    this.firebaseAuth = getAuth();
    this.googleProvider = new GoogleAuthProvider();
    this.githubProvider = new GithubAuthProvider();
  }

  login(providerName) {
    const authProvider = this.getProvider(providerName);
    return signInWithPopup(this.firebaseAuth, authProvider);
  }

  getProvider(providerName) {
    switch (providerName) {
      case "Google":
        return this.googleProvider;
      case "Github":
        return this.githubProvider;
      default:
        throw new Error(`not supported provider: ${providerName}`);
    }
  }

코드가 쓸데없이 길지만 요약하면

onLogin함수에서 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처:

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

참고:

https://velog.io/@coin46/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EC%BD%9C%EB%B0%B1-Promise-asyncawait