null과 undefined 차이

TypeScript/JavaScript에서 null과 undefined의 차이

기본 개념

• undefined: 값이 할당되지 않은 상태
• null: 의도적으로 값이 없음을 나타내는 상태

undefined를 사용하는 경우

1. 선택적 매개변수 (Optional Parameters)

interface QueryParams {
  slug: string;
  token?: string;  // undefined 사용
}

function getArticle({ slug, token }: QueryParams) {
  // token이 전달되지 않으면 undefined
}

2. 아직 값이 할당되지 않은 상태

interface User {
  id: number;
  name: string;
  deletedAt?: Date;  // 삭제되지 않은 상태 = 값이 없는 상태
}

3. API 요청 전 초기 상태

const [data, setData] = useState<Data | undefined>();
// 데이터를 아직 받아오지 않은 상태

null을 사용하는 경우

1. 의도적으로 값을 비워둔 상태

interface UserProfile {
  id: number;
  name: string;
  phoneNumber: string | null;  // "전화번호를 입력하지 않겠다"를 선택
  profileImage: string | null;  // "프로필 이미지를 사용하지 않겠다"를 선택
  notificationToken: string | null;  // "알림을 받지 않겠다"를 선택
}

2. 사용자가 명시적으로 선택한 빈 값

interface FormData {
  name: string;
  age: number;
  bio: string | null;  // 사용자가 의도적으로 비워둔 자기소개
}

실제 사용 예시

undefined 사용이 적절한 경우

// 1. 선택적 props
interface ComponentProps {
  title?: string;  // 제공되지 않을 수 있는 prop
  onClick?: () => void;  // 선택적 이벤트 핸들러
}

// 2. API 응답 타입
interface ApiResponse {
  data?: {
    user?: {
      settings?: UserSettings;  // 계층적 데이터에서 없을 수 있는 값
    }
  }
}

// 3. 초기 상태
const [searchResults, setSearchResults] = useState<Result[] | undefined>();

null 사용이 적절한 경우

// 1. 사용자 설정
interface UserPreferences {
  theme: string;
  customBackground: string | null;  // 배경 이미지 사용하지 않음 선택
}

// 2. 폼 데이터
interface RegistrationForm {
  name: string;
  email: string;
  referralCode: string | null;  // 추천인 코드 없음을 명시
}

결론

• undefined는 "아직 값이 할당되지 않은 상태" 또는 "선택적인 값"을 나타낼 때 사용
• null은 "의도적으로 값을 비워둔 상태"를 나타낼 때 사용
• TypeScript의 엄격한 타입 체킹과 함께 사용할 때 이러한 구분은 더욱 명확한 코드를 작성하는 데 도움이 됨