Optional Chaining은 React 앱 개발을 어떻게 더 쉽게 만들어줍니까?

개체 변수에 특정 속성이 있는지 확실하지 않은 경우 어떻게 합니까?

내 최근 대답은 선택적 연결입니다.

옵셔널 체이닝이란?

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. Optional chaining (?.) - JavaScript | MDN

방금 MDN에서 인용했습니다 하하.

기본적으로 개체 내의 속성에 쉽게 액세스할 수 있습니다.

React 앱 개발이 어떻게 더 쉬워지나요?

Firebase 인증에서 사용자 데이터를 가져온다고 상상해 보십시오.

데이터를 가져온 후 사용자 변수는 다음과 같습니다.

{ displayName: 'Mike' }

import React from 'react';
// Use Context API and make useStateValue
import { useStateValue } from './context/useStateValue'

function App() {
  const [user, dispatch] = useStateValue(null);

  return (
    <div className="App">
      <h1>Welcome, {user.dispayName}</h1>
    </div>
  );
}

export default App;

무슨 일이 일어날까요?

TypeError: Cannot read property 'dispayName' of null

예, 이런 일이 발생합니다.

기존 방식

삼항 미적분학

저는 이 경우 Optional Chaining 이전에 항상 Trinomial calculus를 사용했습니다.

이 패턴에서 React 앱은 처음에 렌더링<div>Loading…</div>한 다음 Firebase에서 데이터를 가져온 후 표시<h1>Welcome, Your Name</h1>합니다.
<h1>는 렌더링해야 할 때까지 렌더링되지 않기 때문에 저는 이것을 좋아합니다.

{user ? <h1>Welcome, {user.dispayName}</h1> : <div>Loading…</div>}

Nullish 병합 연산자

<h1>Welcome, {user && user.dispayName}</h1>

옵셔널 체이닝 사용

하나만 추가하면 됩니다? ! 치명적이지 않습니까!?

<h1>Welcome, {user?.dispayName}</h1>

결론

나는 대부분의 경우 선택적 연결이 매우 편리하고 개발 속도를 높인다고 생각합니다.

개체 또는 속성이 유효하지 않은 동안 다른 요소를 표시해야 하는 경우 삼항 미적분을 사용합니다.