TypeScript Academy · 강의

?.를 사용한 선택적 체이닝

null일 수 있는 깊게 중첩된 속성에 안전하게 접근합니다.

?.를 사용한 선택적 체이닝은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

옵셔널 체이닝 연산자

옵셔널 체이닝(?.)을 사용하면 null 또는 undefined일 수 있는 값의 속성에 안전하게 접근할 수 있습니다. 값이 null 또는 undefined이면 예외를 발생시키는 대신 전체 표현식이 undefined로 단락 평가됩니다.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

null 또는 undefined일 때 단락 평가

?. 앞의 피연산자가 null 또는 undefined이면 평가가 즉시 중단되고 undefined가 반환됩니다. 체인의 나머지 부분은 실행되지 않습니다.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

여러 단계 연결하기

깊이 중첩된 접근에서 불확실한 각 단계에 ?.를 배치할 수 있습니다. 연결 요소 중 하나라도 null 또는 undefined이면 전체 체인이 단락 평가되어 'undefined의 속성을 읽을 수 없습니다'와 같은 오류를 방지합니다.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

결과 타입에는 undefined가 포함됩니다

체인의 결과가 undefined일 수 있으므로 TypeScript는 결과 타입에 undefined를 추가합니다. 속성 타입이 string이었다면 체인의 결과는 string | undefined가 됩니다.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

undefined 결과 처리하기

결과가 undefined일 수 있으므로 일반적으로 결과를 검사하거나 대체값을 제공해야 합니다. 타입 시스템이 값이 없는 경우를 처리하도록 알려 줍니다.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

&& 체인과 비교하기

?.가 도입되기 전에는 개발자들이 긴 && 체인을 작성했습니다: a && a.b && a.b.c. 옵셔널 체이닝은 같은 의도를 훨씬 간결하게 표현하며 위에서 아래로 읽기도 쉽습니다.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

?.가 &&보다 나은 이유

&& 방식은 모든 거짓으로 평가되는 값(0, '', false)을 중단 지점으로 처리하므로 버그가 될 수 있습니다. 옵셔널 체이닝은 오직 null 또는 undefined일 때만 중단하므로, 일반적으로 원하는 동작에 더 가깝습니다.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

객체 배열에서 옵셔널 체이닝 사용하기

옵셔널 체이닝은 모든 속성 접근에서 작동합니다. 요소 접근과 함께 사용하면 중첩된 객체 배열 내부에도 안전하게 접근할 수 있습니다.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

단락 평가는 전체 표현식을 중단합니다

체인이 단락 평가되면 그 뒤에 작성된 속성 접근도(?. 없이 작성된 경우에도) 건너뜁니다. 전체 표현식이 한 번에 undefined로 평가됩니다.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

함수 반환값과 함께 사용하는 옵셔널 체이닝

함수 호출의 결과에 이어서 체이닝할 수 있습니다. 함수가 null 또는 undefined인 값을 반환하면 뒤따르는 접근이 안전하게 단락 평가됩니다.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

실용적인 구성 설정 예시

옵셔널 체이닝은 중첩된 필드가 없을 수 있는 일부 구성 설정이나 애플리케이션 프로그래밍 인터페이스 응답을 읽을 때 특히 유용합니다. 접근 코드를 읽기 쉽게 유지하면서 충돌도 방지합니다.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

빠른 확인

옵셔널 체이닝에 대한 이해도를 확인해 보십시오.

복습: 옵셔널 체이닝

?.에 대해 다음 내용을 배웠습니다:

null 또는 undefined일 수 있는 값의 속성에 안전하게 접근합니다.
null 또는 undefined인 연결 요소가 있으면 전체 표현식을 undefined로 단락 평가합니다.
결과 타입에 undefined를 추가합니다.
모든 거짓 값에서 중단하는 && 체인과 달리 null 또는 undefined일 때만 중단하므로 더 개선된 방식입니다.

다음으로 null 병합 연산자를 살펴봅니다.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

자주 묻는 질문

“?.를 사용한 선택적 체이닝” 강의는 무료인가요?

네 — “?.를 사용한 선택적 체이닝” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“?.를 사용한 선택적 체이닝”에서 뭘 배우나요?

null일 수 있는 깊게 중첩된 속성에 안전하게 접근합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“?.를 사용한 선택적 체이닝” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기