JS: 안전연산자(?)

return ( 
<>
<div>{my_lists[bucket_num].text}</div>
<button onClick={remove_Bucket}>삭제하기</button>
<>
); 
// Uncaught TypeError: Cannot read property 'text' of undefined

오늘 이런 타입에러를 확인할 수 있었다.
처음에는 undefined만 보고 text 만 확인했는데 알고 보니 변수명이 잘못된게 아니었다.
undefined 안에 있는 속성 'bucket'을 읽을 수 없다:
undefined는 text가 아니라 my_lists[bucket_num]에 해당하는 말이었다.

1. 위의 div 가 렌더링 된다.
2. 버튼을 누르면 리덕스를 통해 div의 텍스트에 해당하는 버킷이 삭제된다.
3. state가 바뀌어 div가 리랜더링된다.
4. 하지만 해당하는 버킷이 삭제됐기 때문에 불러올 수가 없다.

4번문제를 해결하기 위해 찾은 방법은 안전연산자이다.

안전연산자

array[0].text 에서 array[0]에 해당하는 요소가 없다면 type error가 발생한다.
안전연산자(optional chaining)는 array[0].text의 .앞에 붙여준다
하지만 ? 하나를 붙임으로써 array[0] 에 해당하는 요소가 있는지 한 번 확인하고
있을 경우에는 text를 / 없을 경우에는 undifined를 리턴한다.
언제 유용할까?
array[0]의 상세페이지로 들어가 버튼을 눌러 array[0]을 삭제하면서
다시 메인페이지로 돌아가는 과정이었다.
굳이 리랜더링 하지 않아도 되는 상세페이지가 리랜더링되면서
에러가 발생했는데 . 대신 ?. 을 사용해 해당하는 값이 없는 경우에도 에러를 발생시키지 않도록 조치했다.

{my_lists[bucket_num]?.text}

또한 mdn을 보면 연속된 속성에 접근할 때 더 깔끔한 표현식을 만들 수 있다고 한다.

let nestedProp = obj.first && obj.first.second;
let nestedProp = obj.first?.second;

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://www.daleseo.com/js-optional-chaining/