[TypeScript] TS2531 Object is possibly 'null'과 Optional Chaining Operator(옵셔널 체이닝 연산자) (?.)

작년 말부터는 웹 개발보다는 앱 개발을 더 열심히 하는 해다. 네이티브에 대한 지식이 없어서, 되도록 빨리 만들어야 하는 MVP 앱은 리액트 네이티브+엑스포 스택으로 시작하게 되었는데, Expo 프레임워크가 제공하는 expo-constants library 사용 중에 만난 타입스크립트 에러이다.

<Animated.View
        pointerEvents={'none'}
        style={[
          StyleSheet.absoluteFill,
          {
            // backgroundColor: Constants.manifest?.splash?.backgroundColor,
            backgroundColor: Constants.manifest.splash.backgroundColor,
            opacity: animation,
            flex: 1,
            top: 284.45,
            alignItems: 'center',
          }
        ]}
      >

 

리액트 네이티브의 Aniamted 모듈을 사용해 backgroundColor를 지정할 때 발생했는데, 이때 App.json에 미리 작성한 시스템 배경색을 가지고 오려고 했다. 주석을 처리하지 않은 코드에서 보면 모든 객체들이 체이닝되어 키들을 잘 따라가고 있는데, 에러가 나서 App.json으로 다시 가서 확인해봤다.

 

"splash": {
      "image": "./src/assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },

Constants에서 app.json의 값을 가지고 오기 위해서는 manifest를 거치는 것은 확인이 되었는데, 이렇게 명세를 채워 기록한다 해도, TS는 객체가 null 값이 될 수도 있다는 상황을 미리 알려주고 있었던 것이다.

 

2021.02.24 - [👩‍💻/JavaScript] - [ES2020] Nullish Coalescing Operator (null 병합 연산자 ??)

[ES2020] Nullish Coalescing Operator (null 병합 연산자 ??)

 

 

? 연산자는 이전에 한 번 소개했던 Nullish Coalescing Operator라고, null 병합 연산자와 유사한 역할을 한다. ?.은 optional chaining operator라고 하는데, 한국어로도 마땅한 번역어 없이, 옵셔널 체이닝 연산자로 부르는 모양이다.

 

ES2020, Optional Chaining Operator ?.

이 연산자는 dot operator로 연결된 각각의 중첩된 객체 안의 프로퍼티를 아주 간단하게 검사해준다. 위 포스트에서도 썼지만, ?? 병합 연산자와 ?. 연산자는 함께 쓸 때 막강해진다. 어떤 값이 존재하지 않을 때 이를 undefined로 받는 대신 좀 더 안전한 방법으로 값을 제공할 수 있다.

 

const AlternativeImage from '../assets/alternative.png';

const Constants = {
    splash: {
           image: null 
    }
}

const SplashImage = Constants?.splash?.image ?? AlternativeImage;

 

리액트 네이티브 개발을 하다가 만났던 에러의 그 Constants의 중첩된 객체인 splash와 image로 예시를 들어보자면, image가 null로 존재하지 않는다 했을 때, null 병합 연산자로 대체 이미지를 넣어줄 수도 있다.

아직 실제 DB에서 값을 받아와 동적으로 뿌리는 단계는 아니라, ?와 ?? 연산자를 그렇게 많이 쓰고 있지는 않은데, 실제 값을 동적으로 받아오고 있다면, 잘 기억해두었다가 써야겠다.