타입스크립트에서 Optional Chaining은 무엇인가요?

Q1: Optional Chaining이란 무엇인가요?
Optional Chaining은 타입스크립트에서 `?.` 연산자를 사용하여 객체의 프로퍼티나 메서드에 접근할 때, 중간에 `null` 또는 `undefined`가 있으면 에러를 발생시키지 않고 `undefined`를 반환하는 문법입니다.

Q2: Optional Chaining을 사용하는 이유는 무엇인가요?
객체의 깊은 프로퍼티에 접근할 때, 중간에 해당 프로퍼티가 존재하지 않으면 런타임 오류가 발생하기 쉽습니다. Optional Chaining을 사용하면 이런 오류를 방지하고 안전하게 접근할 수 있습니다.

Q3: Optional Chaining의 기본 문법은 어떻게 되나요?
```typescript
object?.property
object?.[expression]
object?.method()
```

Q4: Optional Chaining이 동작하는 예시는 어떤 것이 있나요?
```typescript
interface User {
name: string;
address?: {
street?: string;
}
}

const user: User = { name: "Alice" };
console.log(user.address?.street); // undefined, 에러 없이 안전하게 접근 ```

Q5: Optional Chaining은 어디까지 사용할 수 있나요?
객체의 프로퍼티 뿐만 아니라 배열, 함수 호출 등에도 사용할 수 있습니다. 예를 들어 `obj?.array?.[index]`, `obj?.method?.()` 처럼 중첩해서 쓸 수 있습니다.

Q6: Optional Chaining과 Nullish 병합 연산자(??) 함께 사용하나요?
네, Optional Chaining으로 얻은 값이 `undefined`일 때 기본값을 주기 위해 Nullish 병합 연산자와 자주 함께 사용됩니다.
```typescript
const street = user.address?.street ?? "기본 주소";
```

Q7: Optional Chaining은 어떤 경우에 유용한가요?
API 응답과 같이 불확실한 구조를 가진 데이터에 접근할 때, 혹은 복잡한 객체에서 일부 프로퍼티가 없을 가능성이 높을 때 유용합니다.

Q8: Optional Chaining 사용시 주의할 점은 무엇인가요?
Optional Chaining은 단순히 접근 시 안전성을 주지만, 값이 없으면 `undefined`가 반환되므로 반드시 반환값 타입을 고려하여 후속 로직을 작성해야 합니다. 또한, 너무 남발하면 코드가 불명확해질 수 있습니다.

Q9: Optional Chaining을 지원하는 타입스크립트 버전은?
타입스크립트 3.7 부터 도입되었으며 이후 버전에서 기본 지원됩니다.

Q10: Optional Chaining 문법 대신 예전에는 어떻게 처리했나요?
주로 `if`문, `&&` 논리 연산자를 사용하여 아래처럼 안전하게 접근했습니다.
```typescript
const street = user && user.address && user.address.street;
```

Optional Chaining은 TypeScript와 JavaScript에서 객체의 깊은 속성에 접근할 때 발생할 수 있는 오류를 방지하기 위한 문법적 기능입니다.

이 기능은 ES2020(ECMAScript 2020)에서 도입되었으며, TypeScript에서도 지원됩니다.

Optional Chaining을 사용하면 객체의 속성이 존재하지 않거나 `null` 또는 `undefined`인 경우에도 안전하게 접근할 수 있습니다.

Optional Chaining의 기본 문법 Optional Chaining은 `?.` 연산자를 사용하여 구현됩니다.

이 연산자는 객체의 속성에 접근할 때, 해당 속성이 존재하는지 확인하고, 존재하지 않으면 `undefined`를 반환합니다.

예를 들어, 다음과 같은 객체가 있다고 가정해 보겠습니다: ```typescript const user = { name: "Alice", address: { city: "Wonderland", zipCode: 12345 } }; ``` 이 객체에서 `user`의 `address` 속성에 접근하고 싶지만, `address`가 존재하지 않을 수도 있는 경우 Optional Chaining을 사용할 수 있습니다: ```typescript const city = user.address?.city; // "Wonderland" const country = user.address?.country; // undefined ``` 위의 코드에서 `user.address?.city`는 `user.address`가 존재하므로 `"Wonderland"`를 반환합니다.

반면에 `user.address?.country`는 `country` 속성이 존재하지 않기 때문에 `undefined`를 반환합니다.

중첩된 객체에 대한 접근 Optional Chaining은 중첩된 객체에 대해서도 유용하게 사용할 수 있습니다.

예를 들어, 다음과 같은 객체가 있다고 가정해 보겠습니다: ```typescript const user = { name: "Alice", address: { city: "Wonderland", zipCode: 12345, country: { name: "Fictionland" } } }; ``` 이 경우, `country`의 `name` 속성에 접근하려면 다음과 같이 Optional Chaining을 사용할 수 있습니다: ```typescript const countryName = user.address?.country?.name; // "Fictionland" const stateName = user.address?.state?.name; // undefined ``` 여기서 `user.address?.country?.name`은 `country`가 존재하므로 `"Fictionland"`를 반환하고, `user.address?.state?.name`은 `state`가 존재하지 않기 때문에 `undefined`를 반환합니다.

배열과의 결합 Optional Chaining은 배열과 함께 사용할 때도 유용합니다.

예를 들어, 배열의 특정 인덱스에 접근할 때 해당 인덱스가 존재하지 않을 수 있습니다: ```typescript const users = [ { name: "Alice" }, { name: "Bob" } ]; const firstUserName = users[0]?.name; // "Alice" const thirdUserName = users[2]?.name; // undefined ``` 위의 코드에서 `users[0]?.name`은 `"Alice"`를 반환하지만, `users[2]?.name`은 존재하지 않는 인덱스이므로 `undefined`를 반환합니다.

사용 시 주의사항 Optional Chaining은 매우 유용하지만, 몇 가지 주의사항이 있습니다: 1. 타입 안전성 : Optional Chaining을 사용할 때, 반환되는 값이 `undefined`일 수 있다는 점을 고려해야 합니다.

따라서 이 값을 사용하는 코드에서는 `undefined`를 처리할 수 있는 로직이 필요합니다.



2. 성능 : Optional Chaining은 객체의 깊은 속성에 접근할 때마다 존재 여부를 확인하므로, 성능에 영향을 줄 수 있습니다.

그러나 일반적인 사용에서는 큰 성능 저하가 발생하지 않습니다.



3. 코드 가독성 : Optional Chaining을 과도하게 사용하면 코드가 복잡해질 수 있습니다.

따라서 적절한 수준에서 사용하는 것이 중요합니다.

결론 Optional Chaining은 TypeScript와 JavaScript에서 객체의 깊은 속성에 안전하게 접근할 수 있는 유용한 기능입니다.

이를 통해 코드의 안정성을 높이고, `null` 또는 `undefined`로 인한 오류를 줄일 수 있습니다.

이러한 기능은 특히 복잡한 데이터 구조를 다룰 때 매우 유용하며, 개발자가 더 간결하고 읽기 쉬운 코드를 작성하는 데 도움을 줍니다.