타입스크립트에서의 옵셔널 체이닝
이 글에서는 타입스크립트에서의 옵셔널 체이닝에 대해 설명합니다.
YouTube Video
타입스크립트에서의 옵셔널 체이닝
타입스크립트의 옵셔널 체이닝은 깊이 중첩된 객체나 배열의 속성에 접근할 수 있는 유용한 기능입니다. 이 기능은 존재하지 않는 속성에 접근할 때 에러를 방지하여 간결하고 가독성 있는 코드를 작성할 수 있게 해줍니다.
옵셔널 체이닝이란 무엇인가요?
옵셔널 체이닝 연산자(?.)는 존재하지 않는 객체 속성이나 메서드에 접근할 경우 undefined를 반환합니다. 이로 인해 속성이 존재하지 않아도 에러를 던지지 않고 코드가 계속 실행될 수 있습니다.
예를 들어, 아래와 같이 중첩된 객체의 속성에 접근할 때 일반적인 방식으로 속성이 존재하지 않으면 에러가 발생합니다.
예제
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- 이 경우,
address가 존재하지 않으면 오류가 발생합니다. 옵셔널 체이닝을 사용하여 이를 방지할 수 있습니다.
옵셔널 체이닝을 사용하는 예제
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- 옵셔널 체이닝을 사용하면 속성이 존재하지 않을 때 에러 대신
undefined를 반환합니다.
옵셔널 체이닝 사용하는 방법
옵셔널 체이닝은 속성 접근, 함수 호출, 배열 접근 등 다양한 상황에서 사용할 수 있습니다. 각각의 사용 방법을 설명하겠습니다.
속성 접근하기
객체의 중첩된 속성에 안전하게 접근할 수 있습니다.
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
이 코드는 company 객체에 location 속성이 존재할 때만 city와 country 속성에 접근하기 위해 옵셔널 체이닝을 사용합니다.
함수 호출
옵셔널 체이닝은 호출하기 전에 함수가 존재하는지 확인할 수도 있습니다.
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
이 코드는 greet 함수가 존재할 때만 안전하게 호출하기 위해 옵셔널 체이닝을 사용합니다. 함수가 정의되어 있지 않아도 오류가 발생하지 않습니다.
배열 접근
옵셔널 체이닝은 배열에 적용하여 요소가 존재하는지 확인할 수 있습니다.
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
team.members가 존재할 때만 배열 요소에 접근하며, 존재하는 인덱스는 값을 반환하고 존재하지 않는 경우에는 undefined를 반환합니다.
옵셔널 체이닝과 널 병합 연산자
옵셔널 체이닝은 undefined를 반환하지만, 때로는 이것만으로 부족할 수 있습니다. 이 경우, TypeScript 3.7에 도입된 널 병합 연산자(??)를 사용하여 null 또는 undefined에 대한 기본값을 제공할 수 있습니다.
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
옵셔널 체이닝과 결합하면 더욱 유연한 코드를 작성할 수 있습니다.
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
옵셔널 체이닝 사용 시 주의사항
옵셔널 체이닝을 사용할 때는 다음 사항을 유의해야 합니다:.
-
불필요한 옵셔널 체이닝 사용
- 존재가 보장된 속성이나 메서드에 옵셔널 체이닝을 사용하면 코드가 불필요하게 장황해질 수 있습니다. 접근하려는 대상의 존재가 불확실할 때만 사용하는 것이 가장 좋습니다.
-
오타
- 옵셔널 체이닝을 과도하게 사용하면 의도하지 않은 속성에 접근하는 오타를 발견하기 어려울 수 있습니다. 적절한 타입 검사를 수행하고 신중히 사용하세요.
코드 요약
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
요약
TypeScript의 옵셔널 체이닝은 깊이 중첩된 객체나 배열에 접근할 때 오류를 방지하면서 간결한 코드를 제공합니다. 또한 널 병합 연산자와 조합하면 기본값을 설정하고 더 유연한 로직을 만들 수 있습니다. 적절히 사용하면 코드의 안전성과 가독성을 크게 향상시킬 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.