React + TypeScript를 공부하다 보면 ? 문법을 여기저기서 보게 되는데,
모두 같은 의미일까? → ❌ 꼭 그렇지 않다!

1. 옵셔널 체이닝 (?.)

const result  = userName?.length;

의미:
userName이 null이나 undefined가 아니면 .length를 실행하고,
그렇지 않으면 undefined를 반환해라!

/*
        ? 는 null safe 연산자

        userName?.length 의 의미는 userName 이 null 이 아닐때만 .length 를 참조해라 라는 의미
        userName!.length 의 의미는 userName 이 null 일 가능성이 없으니 그냥 .length 를 참조해라 라는 의미

        const result = userName?.length 에서 
        1. userName 이 null 이 아니면 .length 가 참조되어서 result 에 문자열의 길이가 대입된다.
        2. userName 이 null 이면 .length 가 참조 되지 않고 result 에는 null 이 대입된다.
        따라서 result 라는 변수도 null 일 가능성이 있다는 의미이다.
        ???
    */

그렇다면 optional 속성의 ?는?

interface User {
  name?: string;
}

• 이건 타입을 정의할 때 쓰는 ?
• name 속성이 있어도 되고, 없어도 되는 선택적 속성 (optional property)

기억하자면...

• ?. 는 실행 중에 사용하는 옵셔널 체이닝 연산자

• ?: 는 타입 정의에서 사용하는 선택적 속성

• 모양은 비슷해도 완전히 다른 용도!