Non-null Assertion Operator 에 대해

Non-null Assertion Operator (!) :

개념

Non-null Assertion Operator(!)는 TypeScript에서 "이 값은 절대 null이나 undefined가 아닐 거야!"라고 컴파일러에게 알려주는 연산자.

기본 사용법

let username: string | null = null;

// 에러 발생: username이 null일 수 있음
console.log(username.length);

// 정상 작동: "이 값은 null이 아니야!"라고 컴파일러에게 알려줌
console.log(username!.length);

실제 사용 예시

React 컴포넌트에서 자주 볼 수 있는 예시:

const UserProfile = () => {
  const [user, setUser] = useState<User | null>(null);

  const handleSubmit = () => {
    // user가 null일 수 있어서 에러 발생
    sendUserData(user.id);  

    // '!'를 사용하면 에러 없음
    sendUserData(user!.id);
  }
}

주의사항

1. 런타임 에러 위험

let data: string | null = null;
console.log(data!.length);  // 런타임 에러 발생!

2. 더 안전한 방법들:

// 1. 조건문으로 체크
if (data !== null) {
  console.log(data.length);
}

// 2. 옵셔널 체이닝 사용
console.log(data?.length);

// 3. 기본값 설정
console.log(data ?? "기본값");

사용이 권장되는 경우

1. DOM 요소 접근이 확실한 경우

const header = document.querySelector('header')!;

2. 초기화가 보장된 클래스 프로퍼티

class User {
  name!: string;  // 생성자가 아닌 다른 곳에서 반드시 초기화됨
}

사용을 피해야 하는 경우

1. API 응답 데이터

// 좋지 않음
const response = await api.getUser();
console.log(response!.data);

// 더 나음
const response = await api.getUser();
if (response) {
  console.log(response.data);
}

2. 사용자 입력 데이터

// 좋지 않음
function processUserInput(input: string | undefined) {
  const length = input!.length;  // 위험!
}

// 더 나음
function processUserInput(input: string | undefined) {
  if (!input) return;
  const length = input.length;
}

정리

• Non-null Assertion Operator는 유용하지만 위험할 수 있는 도구
• 가능하면 조건문이나 옵셔널 체이닝 같은 더 안전한 방법 권장
• 값이 확실히 존재한다고 보장될 때만 사용!

코드의 안전성을 높이기 위해서는 명시적인 null 체크를 하는 것이 좋음.