► React Native/개발일기

[React Native] 옵셔널체이닝 Optional Chaining (?.)

다람트리 2022. 10. 31. 23:07
반응형
에러발생

❖ 배경: react native, Xcode, 앱개발

❖ 상황: 버튼을 누르면, 페이지가 이동하면서 데이터 값이 시각화되어야하는데,

     페이지이동이 먼저되고, 데이터가 도착이 늦어 시각화될 내용이없어 에러가 나는 상황.

        <TechnicalNoticeList
          navigateTechNotiDetail={navigateTechNotiDetail}
          noticeData={technicalNotiData.TECH_KNOWLEDGE_LIST}
        />

❖ 코드: noticeData를 통해 데이터가 들어옴

해결 -> 옵셔널체이닝
        <TechnicalNoticeList
          navigateTechNotiDetail={navigateTechNotiDetail}
          noticeData={technicalNotiData?.TECH_KNOWLEDGE_LIST}
        />

❖ 코드: 옵셔널체이닝을 활용하여, noticeData의 api 마디마다 (?.)로 수정함.

❖ 해결된 상태: 시각화될 데이터가 들어오길 기다렸다가, 데이터가 화면에 보여짐

왼) 데이터들어오길 기다리는중 / 오) 데이터들어오고 리스트가 나열된 상태

옵셔널체이닝이란 ? 

Optional Chaining은 ES2020에서 등장한 새로운 연산자 이다.

'?.'의 형태로 쓰인다.

만약, 참조가 null 또는 undefined여도 에러식이 나오지않고, undefined값을 리턴하고 넘어간다.

즉, 간결한 표현식을 사용하여 문법의 가독성이 좋아진다.

 

속성값이 존재한다는 확실한 보증이 없을 경우, 그 객체를 탐색하는데 도움이된다

 단, 로그인과 같은 보안적인 상태에서는 사용하지말자 

   개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D     

반응형