[React] 옵셔널 체이닝

옵셔널 체이닝 연산자(Optional Chaining Operator): ?.를 사용하여 객체의 속성에 안전하게 접근할 수 있는 연산자이다. 이 연산자는 객체가 존재하는 경우에만 속성에 접근하고, 객체가 존재하지 않는 경우에는 undefined를 반환한다.

따라서 ${movie?.backdrop_path}는 movie 객체가 존재하고 backdrop_path 속성이 있는 경우에는 해당 값으로 대체되고, movie 객체가 존재하지 않거나 backdrop_path 속성이 없는 경우에는 undefined가 반환된다.

예를 들어, movie 객체가 존재하고 backdrop_path 속성이 "example.jpg"로 설정되어 있다면, ${movie?.backdrop_path}는 "example.jpg"로 대체될 것이고, movie 객체가 존재하지 않는다면 undefined가 반환된다.

옵셔널 체이닝이 활용된 예시

movie의 videos의 results 배열의 0번째 객체의 key값을 가져오고 싶었는데 문제가 생겼다.

<Iframe
  src={`https://www.youtube.com/embed/${movie.videos.results[0].key}
            ?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`}
  allow="autoplay; fullscreen"
></Iframe>;

위처럼 입력을 해 놓았는데, videos.results가 없는 영화들은 key값을 찾지 못해 에러가 발생한다. 애초에 해당 results 배열이 없는 영화는 비디오시청을 아예 금지하기 위해,

{
  movie.videos?.results?.length > 0 && movie.videos.results[0].key && (
    <button className="banner_button play" onClick={() => setIsClicked(true)}>
      play
    </button>
  );
}

해당 재생버튼 자체에 Optional Chaining과 논리연산자를 사용하여 해당 조건에 부합할 때만 버튼이 렌더링 되도록 설정해준다