?. (옵셔널 체이닝)과 ?? (널 병합 연산자)란?

?. (옵셔널 체이닝)과 ?? (널 병합 연산자)란?

둘 다 안전하게 값에 접근하고 기본값을 설정하는 역할을 합니다.
하지만 동작 방식이 다르므로 각각 설명드릴게요.

---

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

객체가 undefined 또는 null일 경우, 오류 없이 undefined를 반환하도록 하는 연산자입니다.

✅ 사용 예제

const user = {
    name: "Alice",
    address: {
        city: "Seoul"
    }
};

// 잘못된 접근 ❌ (address가 없는 경우 오류 발생)
console.log(user.address.city); // "Seoul"
console.log(user.phone.number); // ❌ TypeError: Cannot read properties of undefined

// 옵셔널 체이닝 사용 ✅
console.log(user.address?.city); // "Seoul"
console.log(user.phone?.number); // ✅ undefined 반환 (오류 발생하지 않음)

🔹 요점

• ?.은 왼쪽 값이 undefined 또는 null이면 오류 없이 undefined 반환
• user.phone.number를 직접 접근하면 오류 발생하지만, user.phone?.number를 사용하면 undefined 반환

---

2. ?? (널 병합 연산자)

undefined 또는 null인 경우 기본값을 설정하는 연산자입니다.

✅ 사용 예제

const user = {
    name: "Alice",
    age: 0
};

console.log(user.age ?? 18); // 0 (age가 존재하므로 그대로 사용)
console.log(user.height ?? 180); // 180 (height가 없으므로 기본값 사용)
console.log(null ?? "기본값"); // "기본값"
console.log(undefined ?? "기본값"); // "기본값"

🔹 요점

• undefined 또는 null이면 오른쪽 값(기본값)을 반환
• 하지만 false, 0, "" 같은 값은 그대로 유지 (|| 연산자와 차이점)

---

3. ?.과 ??를 같이 쓰는 경우

옵셔널 체이닝(?.)으로 안전하게 접근한 후, ??로 기본값을 설정할 수 있습니다.

const user = {
    name: "Alice",
    address: {
        city: "Seoul"
    }
};

console.log(user.address?.city ?? "Unknown City"); // "Seoul"
console.log(user.phone?.number ?? "No Number"); // "No Number"
console.log(user.nickname?.toUpperCase() ?? "No Nickname"); // "No Nickname"

💡 정리

✅ ?. → undefined 또는 null이면 오류 없이 undefined 반환
✅ ?? → undefined 또는 null이면 기본값 반환
✅ 둘을 조합해서 안전한 접근과 기본값 설정 가능!

---

📌 예제 코드 적용

위에서 문제 해결했던 코드에서 ?.과 ??을 적용하면 아래처럼 됩니다.

{('creator' in attribute && attribute.creator) && (
    <>
        <Divider sx={{ marginBlock: '10px' }} />
        <Stack direction={'row'} spacing={2} alignItems={'center'}>
            <UserAvatar path={attribute.creator?.creatorImageURL ?? ''} name={attribute.creator?.creatorName ?? 'Unknown'} />
            <Box>
                <Typography variant="body2">{attribute.creator?.creatorName ?? 'Unknown'}</Typography>
                <Typography variant="body2">{TimeUtil.toDateString(attribute.updatedAt)}</Typography>
            </Box>
        </Stack>
    </>
)}

📍 적용된 부분

• attribute.creator?.creatorImageURL ?? ''
  → creatorImageURL이 undefined라면 **빈 문자열("")**을 반환
• attribute.creator?.creatorName ?? 'Unknown'
  → creatorName이 undefined라면 **"Unknown"**을 반환

---

🚀 결론

연산자 역할 예제

?.	안전한 객체 속성 접근	user.phone?.number → undefined (오류 발생 안함)
??	null 또는 undefined이면 기본값 반환	user.age ?? 18 → 18 (기본값 설정)
?. + ??	안전한 접근 + 기본값 설정	user.nickname?.toUpperCase() ?? "No Nickname"

이제 ?.과 ??를 이해하면 TypeScript/JavaScript에서 안전한 데이터 접근과 기본값 설정을 훨씬 쉽게 할 수 있습니다! 🚀
더 궁금한 점이 있으면 언제든지 물어보세요 😊