리액트 - Null operator vs Optional chaning ( ! vs ?)

프론트엔드의 입장에서 코딩을 하다보면, 정말 자주 마주하게 되는 에러중 하나는 

Uncaught TypeError: Cannot read properties of undefined (reading 'users')

그리고 타입스크립트에서는 

'inputRef.current' is possibly 'null'.ts(18047)

 

이렇게 두 종류가 있습니다 😫

 

결론부터 말하자면, 이 둘은 자바스크립트에서 제공되는 기능으로 처리하기가 아주 간단합니다 🤔

 

undefined의 경우에는 아래처럼 undefined가 들어올거 같은 데이터뒤에 ? 이 물음표 하나만 넣어주면 에러가  해결되고

allUsersAPI.data?.users?.map()

 

아래의 경우에는 data가 null일지도 모른다는 그 데이터 뒤에 ! 하나만 추가해 주면 됩니다.

inputRef.current!.value = "";

---

Optional chaning ('?') 을 먼저 보면

 

이 문법은 변수나 프로퍼티에 접근할 때, 해당 값이 null 또는 undefined인 경우에는 접근을 중단하고 undefined를 반환합니다.

 

자바스크립트에는 데이터를 fetching 할때, promise가 걸리고, promise에는 pending 이라는 status가 있습니다.

 

다시말해서, 데이터를 준비하는데 시간이 걸리는데, 이 시간동안은 데이터가 없으니까 undefined를 주고 있던겁니다.

 

이런 경우, undefined는 필요없고, 데이터나 줘! 라고 할때 이 옵셔널 체이닝을 사용하면 됩니다 😄

 

---

Null operator 혹은 Null 연산자 라고도 하며,

 

TypeScript에서 변수나 프로퍼티가 null 또는 undefined일 경우, 해당 값을 강제로 non-null로 캐스팅하는 역할입니다.

따라서, inputRef.current가 null 또는 undefined인 경우에도 강제로 value에 접근하고 값을 할당합니다.

 

말이 어렵긴한데 간단히 보면,

 

그냥 내가 사용하려는 변수안에 데이터가 null 혹은 undefined 상태일때, 이 상태를 무시하고 내가 주고싶은 값을 줘버리는 겁니다 😁

 

---

해당 두 내용은 타입스크립트 개발자라면 알고 넘어가는게 좋다고 생각됩니다.

(모르면 어차피 또 구글링 하고 있는 자신을 발견할지도.. 😅)