옵셔널 체이닝(Optional chaining)

react 프로젝트를 만들다가 굉장히 시간을 쏟게 만드는 문제가 발생했다.

localStorage에 있는 값을 JSON.parse메서드로 배열 형태로 변형 시켰다.

처음에는 빈 배열인데 어떤 요소를 click해서 저 빈 배열에 아무 값이나 들어가게 되면 특정 컴포넌트가 렌더링되게 코드를 짜야했다.

구글링을 하다 우연히 찾은 문법이다.

사용이유에 대해 간단하게 작성해보았다.

if(location.pathname == '/' && JSON.parse(localStorage.getItem('watchedId')).length !== 0) 

단축평가를 통한 if문이다.

하지만 이러한 TypeError이 뜬다.
Cannot read properties of null (reading 'length')

위의 에러는 배열 의 길이를 재기 전에 값이 없거나 잘못된 이유에서 에러가 뜬다고 한다. 에러가 발생하니 이전의 코드들이 작동을 하지 않는 문제가 생겼다.

이 때 옵셔널 체이닝을 사용하게되면 해결된다.

기존의 Arr.length에서 그냥 물음표 하나만 앞에 추가해주면 된다.
Arr?.length와 같이 말이다.

유효하지 않은 값이라면 undefined를 반환을 해서 에러가 생기는 것을 방지 해주기때문에 코드가 잘 작동했다.

호환성 문제로 can i use 사이트에서도 확인해보았지만 사용 가능한 것으로 판별했다.

추가 예제

	let user = {}; // 주소 정보가 없는 사용자
	console.log((user.address.street));	 // TypeError: Cannot read properties of undefined (reading 'street')

	let user = {}; // 주소 정보가 없는 사용자
	console.log((user?.address?.street));	 // undefined

객체의 프로퍼티값이 없으면 당연히 에러가 발생하지만
옵셔널 체이닝 문법 사용하면 undefined를 반환해서 에러를 발생시키지 않는다. 이러한 이유로 내가 요긴하게 사용 했다.

이해가 안되는 점

의문점은 리액트상에서 저 if문 코드에서는 그냥 .length로 작성하면 TypeError가 떴지만

따로 html파일을 만들어서 똑같이 코드를 작성해보니까 .length를 해도 길이를 반환 한다.

혼동이 온다..