Fallback & Callback 실전 차이

최근 댓글 컴포넌트 개발 중 fallback이라는 개념이 등장했는데, 어디서 왔고 왜 필요한 걸까?
아래에서 상황과 함께 쉽게 정리해보자.

개요

리액트로 댓글 컴포넌트를 개발하면서 이렇게 정의했다:

const ProductComments = ({ comments = [] }) => {
  // 로직 …
};

여기서 핵심은 ({ comments = [] }) 부분이다.
원래는 부모 컴포넌트로부터 comments 데이터를 넘겨받아야 하지만,
데이터 로딩 전이라면 undefined일 수도 있다.
이럴 때 그대로 .length 같은 속성을 접근하면 에러가 발생한다.

=> 이해를 못할 사람들을 위해 풀어 설명하자면, 댓글과 부모 컴포넌트를 한꺼번에 받아오는 과정에서 댓글 갯수 + 댓글을 보여줘야 할 때, 댓글 로딩이 마저 되지 않았는데 length와 같이 갯수 계산을 해야한다면 당연하게도 값이 생기다 말았거나 없기 때문에 에러가 발생한다는 것이다.

진짜 미친 친절함..

👉 이 문제를 해결하기 위해 fallback 개념이 등장했다.

Fallback이란?

원래 값이 없더라도, 최소한 작동 가능하게 하는 ‘대체 값’ 또는 ‘대체 로직’

예를 들면:

• 원래 값이 undefined일 때 대신 사용할 기본값 ([], null, '' 등)
• 원래 로직이 실패했을 때 대신 사용할 로직

💻 원래 어디서 왔을까?

fallback은 원래 일반적인 프로그래밍·시스템 설계 개념이다.

상황	원래 값 / 로직	Fallback
폰트 로드 실패	원래 폰트	대체 폰트
데이터 로드 실패	원래 데이터	빈 배열 []
서비스 다운	원래 서비스	대체 서비스
값이 null일 때	원래 값	기본 값 ('Guest')

자바스크립트 / 리액트 속 Fallback 예시

- 원래 값이 없으면 빈 배열로 대체

const ProductComments = ({ comments = [] }) => {
  return (
    <>
      {comments.length === 0 
        ? <div>아직 댓글이 없어요</div> 
        : comments.map(...)}
    </>
  );
};

- 원래 값이 없으면 기본 문구로 대체

const Greeting = ({ user }) => {
  const userName = user?.name ?? 'Guest';
  return <div>안녕하세요, {userName}님!</div>;
};

- 원래 로직이 실패하면 다른 로직 수행

return isLoading 
  ? <LoadingSpinner /> 
  : error 
    ? <ErrorMessage /> 
    : <DataList data={data} />;

근데.. fallback 어디선가 낯이 익지 않던가..?
뭐와 비슷했던 거 같은데

어 callback이 있었잖아

(현실반영)

기존에 알고 있던 Callback과 뭐가 다른가?

개념	정의
Fallback	원래 값·로직이 없을 때 대신 사용할 값·로직
Callback	다른 로직 내에서 호출될 함수

👉 두 개념은 비슷해 보일 수 있으나 완전히 다른 목적이다:

1. fallback: 값과 로직이 없을 때 대신하는 ‘대체값·대체로직’

2. callback: 다른 로직 속에서 호출될 ‘함수’

✨ 한 문장 정의

Fallback은 원래 값이 없더라도 최소한으로 작동 가능하게 만드는 안전장치 (gpt 왈)