옵셔널 체이닝 '?.'(optinal chaining)

옵셔널 체이닝이란?

객체 내의 key에 접글할 때 그 참조가 유효한지 아닌지 직접 명시 하지 않고도 접근할 수 있는 연산자이다.

?. 앞에 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환한다.

 

삼항연산자의 ?과는 다른 개념이다.

삼항 연산자의 ?는 조건 연산자로서, 조건식이 참이면 첫번째 피연산자를 반환하고, 거짓이면 두번째 피연산자를 반환한다.

 

반면에, 옵셔널체이닝은 옵셔널 타입의 변수나 프로퍼티에 안전하게 접근하기 위한 방법 중 하나이며, 이를 통해 옵셔널 값이 nil일 경우 코드 실행 중 에러가 발생하는 것을 방지할 수 있다. 

 

nil은 말 그대로 '아무 것도 없음'을 의미하는 특별한 값인데 null과 개념은 비슷하지만, 사용되는 프로그래밍 언어에 따라 차이가 있을 수 있다.

옵셔널 변수는 일반 변수와 달리 값을 가질 필요가 없으며, 초기화하지 않아도 된다. 초기화하지 않으면 자동으로 nil로 설정된다. 따라서, 옵셔널 변수를 사용할 때는 nil 값이 할당될 가능성이 있기 때문에, 항상 nil 값을 처리하는 방법을 고려해야한다.

 

nil은 Swift, Objective-C 및 다른 Apple 프레임워크에서 사용되는 용어로, "값이 없음"을 나타내는 특별한 상수이다.

null은 Java, JavaScript, PHP 및 C#과 같은 다른 언어에서 사용되는 용어로, "값이 없음"을 나타내는 예약어이다.

 

import { useEffect } from 'react';
import './App.css';
import axios from 'axios';
import { useState } from 'react';

function App() {
  const [todos,setTodos] = useState(null)
  
  const fetchTodos = async ()=>{
    const {data} = await axios.get('http://localhost:4000/todos')
    console.log('data',data)
    setTodos(data)
  }

  useEffect(()=>{
    //db로부터 값을 가져올 것이다.
    fetchTodos()
  },[])
  return (
    <div>
      {todos.map(item=>{
        return (
        <div key={item.id}>
          {item.id} : {item.title}
          </div>)
      })}
    </div>
  );
}

export default App;

이코드에서 

  const fetchTodos = async ()=>{
    const {data} = await axios.get('http://localhost:4000/todos')
    console.log('data',data)
    setTodos(data)
  }

async로 서버에서 데이터를 불러오는것보다 return문이 먼저 실행이 되면 todos의 값이 nil일수도 있기 때문에 

caught TypeError: Cannot read properties of null (reading 'map')
 에러가 뜰 수 있다.

 

이걸 해결하기 위해서 옵셔널체이닝을 사용하게 되면 nil일 경우에도 평가를 멈추고 undefined를 반환하게 되서 에러가 뜨지 않게 된다.

  return (
    <div>
      {todos?.map(item=>{
        return (
        <div key={item.id}>
          {item.id} : {item.title}
          </div>)
      })}
    </div>
  );

 

 

옵셔널체이닝의 장점 

 

1. Nil 값에 대한 안전성 보장

옵셔널 타입은 변수나 프로퍼티가 nil 값을 가질 수 있다는 것을 나타낸다. 만약 옵셔널 값이 nil이라면, 일반적인 방식으로 변수나 프로퍼티에 접근하면 런타임 에러가 발생한다. 하지만 옵셔널 체이닝을 사용하면, nil 값을 가진 변수나 프로퍼티에 안전하게 접근할 수 있으며, 런타임 에러를 방지할 수 있다.

 

2. 코드의 간결성 유지

옵셔널 값이 nil인지 검사하고, nil이 아닌 경우에만 접근하는 코드를 작성하는 것은 번거롭고 복잡하다. 이런 경우, 옵셔널 체이닝을 사용하면 코드를 더욱 간결하게 작성할 수 있다.

 

3. 중첩된 옵셔널 값에 쉽게 접근

옵셔널 타입의 프로퍼티나 메소드를 호출할 때, 중첩된 옵셔널 값에 쉽게 접근할 수 있다. 옵셔널 체이닝을 사용하면, 중첩된 옵셔널 값을 검사하고, nil 값인 경우에도 안전하게 접근할 수 있다.

 

4. 옵셔널 값의 반환과 사용의 편의성

옵셔널 체이닝은 옵셔널 값을 반환하는데, 이를 이용해 옵셔널 값의 반환과 사용이 편리하다. 예를 들어, 옵셔널 체이닝을 사용하면 배열의 인덱스를 이용한 접근에서 발생하는 런타임 에러를 방지하고, 옵셔널 값을 안전하게 처리할 수 있다.

따라서, 옵셔널 값이 nil일 가능성이 있는 변수나 프로퍼티에 안전하게 접근하려면 옵셔널 체이닝을 사용하는 것이 좋다.

 

옵셔널체이닝의 단점

1. 코드 가독성이 떨어질 수 있다.

옵셔널 체이닝을 남용하면 코드의 가독성이 떨어지는 경우가 있다. 여러 단계에 걸쳐 옵셔널 체이닝을 사용하는 경우, 코드의 의도를 파악하기 어렵고 디버깅이 어려울 수 있다.

 

2. 성능상의 부담이 있을 수 있다.

옵셔널 체이닝을 사용하면 추가적인 호출과 메모리 할당이 필요하므로 성능상의 부담이 있을 수 있다. 이는 옵셔널 체이닝이 매우 긴 체인으로 이어지는 경우에 더욱 문제가 될 수 있다

 

3. 옵셔널 값이 nil인 경우에 대한 처리가 필요하다.

옵셔널 체이닝을 사용하는 경우, 옵셔널 값이 nil인 경우를 처리해주어야 한다. 이를 처리하지 않으면, 런타임 에러가 발생할 수 있다. 따라서, 옵셔널 값이 nil일 가능성이 있는 경우에는 nil 처리에 대한 고려가 필요하다

 

4.Optional Binding 보다 복잡할 수 있다.

일부 복잡한 상황에서는 Optional Binding을 사용하는 것이 옵셔널 체이닝보다 코드를 더 간결하게 유지할 수 있다. 이 경우 옵셔널 체이닝을 사용하는 것보다 Optional Binding을 사용하는 것이 더 적합할 수 있다.

따라서, 옵셔널 체이닝을 사용할 때에는 코드 가독성과 성능, nil 처리 등을 고려해야 한다.

 

옵셔널 체이닝 MDN 문서의 주의사항

https://ko.javascript.info/optional-chaining