Callback과 Fallback의 차이 알아보기

| 서론

안녕하세요, 팡일입니다.

웹 개발을 공부하다 보면 Callback과 Fallback이라는 용어를 자주 접하게 됩니다 두 단어는 발음과 형태가 비슷하지만, 의미와 사용하는 목적은 전혀 다릅니다.

Callback은 특정 시점에 실행할 함수를 의미하고, Fallback은 원래 사용하려던 값이나 기능을 사용할 수 없을 때 선택하는 대안을 의미합니다.

이번 글에서는 React에서 볼 수 있는 예시를 통해 두 개념의 차이를 간단하게 알아보겠습니다.

| Callback이란?

Callback은 다른 함수에 전달되어 특정 시점에 실행되는 함수입니다. 우리말로는 콜백 함수라고 부릅니다.

function handleClick() {
  console.log('버튼을 클릭했습니다.');
}

function Button() {
  return (
    <button onClick={handleClick}>
      클릭
    </button>
  );
}

위 코드에서 handleClick은 버튼을 클릭했을 때 실행됩니다.

함수가 바로 실행되는 것이 아니라 onClick에 전달되었다가 클릭 이벤트가 발생했을 때 호출되므로 콜백 함수에 해당합니다.

Callback은 “이 일이 발생하면 이 함수를 실행해줘”라는 의미입니다.

| Callback을 사용하는 경우

콜백 함수는 특정 작업이 끝나거나 이벤트가 발생한 뒤에 실행할 동작을 전달할 때 사용합니다.

대표적인 예시는 다음과 같습니다.

• 버튼을 클릭했을 때

• 입력값이 변경되었을 때

• 일정 시간이 지났을 때

• 배열의 각 요소를 처리할 때

• 비동기 작업이 완료되었을 때

setTimeout(() => {
  console.log('1초 후 실행됩니다.');
}, 1000);

setTimeout에 전달한 함수는 1초가 지난 뒤 실행되는 콜백 함수입니다.

배열 메서드에서도 콜백 함수를 자주 사용합니다.

const numbers = [1, 2, 3];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

map에 전달한 함수는 배열의 각 요소를 처리하기 위해 호출되는 콜백 함수입니다.

| 함수를 전달하는 것과 실행하는 것

React에서 콜백 함수를 사용할 때는 함수를 전달하는 것과 실행하는 것을 구분해야 합니다.

<button onClick={handleClick}>
  클릭
</button>

handleClick은 함수 자체를 전달합니다. 사용자가 버튼을 클릭했을 때 React가 해당 함수를 실행합니다.

<button onClick={handleClick()}>
  클릭
</button>

반면 handleClick()은 함수를 즉시 실행합니다. 클릭할 때가 아니라 컴포넌트가 렌더링되는 과정에서 실행되기 때문에 의도와 다른 동작이 발생할 수 있습니다.

콜백으로 전달할 때는 일반적으로 함수 이름 뒤에 괄호를 붙이지 않습니다.

| Fallback이란?

Fallback은 원래 사용하려던 값이나 기능을 사용할 수 없을 때 대신 사용하는 대안입니다.

function Profile({ imageUrl }: { imageUrl?: string }) {
  return (
    <img
      src={imageUrl || '/default-profile.png'}
      alt="프로필"
    />
  );
}

imageUrl이 존재하면 해당 이미지를 사용합니다.

하지만 값이 없다면 기본 이미지인 /default-profile.png를 대신 사용합니다. 이 기본 이미지가 Fallback입니다.

Fallback은 “원래 것을 사용할 수 없다면 이것을 대신 사용해줘”라는 의미입니다.

| React에서 사용하는 Fallback

React에서는 데이터를 불러오거나 컴포넌트를 준비하는 동안 대신 보여줄 화면을 지정할 때 Fallback을 사용할 수 있습니다.

대표적인 예가 Suspense입니다.

<Suspense fallback={<p>불러오는 중...</p>}>
  <Profile />
</Suspense>

Profile 컴포넌트가 준비되지 않았다면 fallback으로 전달한 로딩 화면을 보여줍니다.

준비가 끝나면 로딩 화면 대신 원래 보여주려던 Profile 컴포넌트를 표시합니다.

에러가 발생했을 때 대신 보여주는 화면도 Fallback UI라고 할 수 있습니다.

<ErrorBoundary fallback={<p>문제가 발생했습니다.</p>}>
  <Profile />
</ErrorBoundary>

Profile을 정상적으로 보여줄 수 없다면 오류 안내 화면을 대신 표시합니다.

| Fallback을 사용하는 경우

Fallback은 원래 사용하려던 값이나 화면을 사용할 수 없는 상황에 대비하기 위해 사용합니다.

대표적인 예시는 다음과 같습니다.

• 데이터가 없을 때 보여주는 기본 문구

• 이미지가 없을 때 보여주는 기본 이미지

• 컴포넌트를 불러오는 동안 보여주는 로딩 화면

• 오류가 발생했을 때 보여주는 안내 화면

• 특정 기능을 지원하지 않을 때 사용하는 대체 기능

const displayName = user.name ?? '이름 없음';

user.name이 null 또는 undefined라면 '이름 없음'을 대신 사용합니다.

이때 '이름 없음'이 Fallback 값입니다.

| Callback과 Fallback의 차이

Callback과 Fallback은 서로 비슷한 개념이 아닙니다.

Callback은 언제 어떤 동작을 실행할지와 관련된 개념이고, Fallback은 원래 계획대로 처리할 수 없을 때 무엇을 대신 사용할지와 관련된 개념입니다.

| 결론

Callback은 다른 함수에 전달되어 특정 시점에 실행되는 함수입니다. 버튼 클릭, 값 변경, 타이머 종료와 같이 어떤 사건이나 작업 이후에 실행할 동작을 지정할 때 사용합니다.

Fallback은 원래 사용하려던 값이나 기능을 사용할 수 없을 때 선택하는 대안입니다. 기본 이미지, 기본 문구, 로딩 화면이나 오류 화면 등이 이에 해당합니다.

두 단어의 형태는 비슷하지만 다음과 같이 구분하면 어렵지 않습니다.

Callback은 나중에 호출할 함수이고, Fallback은 문제가 생겼을 때 대신 사용할 대안입니다.