[React] 옵셔널 체이닝

리액트를 사용해 코드를 작성하다보면 서버통신 및 컴포넌트 라이프 사이클 차이에 따라 null, undefined를 반환해 가끔 오류가 발생하곤 한다.

이는 그래도 친절하게 오류 코드로 알려주기에 해결하긴 쉬울 수 있지만,

존재 또는 존재하지 않는 요소와 메서드들에 대해 안전하게 접근할 수 있도록 도와주는 옵셔널 체이닝 연산자를 통해 더 쉽게 해결할 수 있다.

 

아래 코드에서 span안의 text값이 몇이 나올지 예상해보자.

import React from 'react'

const getNonEmptyCategories = (catrgories) => (
    categories.filter((category) => category.items > 0);
)

// categories = [ {items: 5, id: 0}, {items: 4, id: 0} ]
// index = 1
const App = ({ categories, index }) => {
    const filterCategory = getNonEmptyCategories(categories);
    
    const filterCategoryValue = filterCategory[index].items;
    
    return (
        <span>{filterCategoryValue}</span>
    )
}

export default App;

위 코드를 보면 당연히 4가 나올 것으로 예상할 수 있다.

저런 당연한 것들이 가끔씩 컴포넌트 라이프 사이클에 따라  filterCategory[index]가 undefined를 반환해
items가 정의되지 않았다는 내용의 500에러를 발생시킨다.

 

이미 서버나 컴포넌트에서 오는 내용들인데 단지 사이클 차이로 저런 현상이 발생한다.

 

그럴 때 사용자들이 많이 사용하는 게 예외처리다.

옵셔널 체이닝 전엔 사용자들은 단축평가, 3항 연산자 통해 예외처리를 많이 했다.

import React from 'react'

const getNonEmptyCategories = (catrgories) => (
    categories.filter((category) => category.items > 0);
)

// categories = [ {items: 5, id: 0}, {items: 4, id: 0} ]
// index = 1
const App = ({ categories, index }) => {
    const filterCategory = getNonEmptyCategories(categories);
    
    //
    let filterCategoryValue = [];
    
    filterCategory[index] &&
    	filterCategoryValue = filterCategory[index].items
    
    // or
    
    const filterCategoryValue = filterCategory[index].items || [];
    
    // or
    
    const filterCategoryValue = filterCategory[index] ? filterCategory[index].items : [];
    
    
    return (
        <span>{filterCategoryValue}</span>
    )
}

export default App;

당연히 위 문법도 크게 문제는 없지만 더 간편하게 쓸 수 있게 자바스크립트에서 옵셔널 체이닝을 개발해줬다.

 

옵셔널 체이닝

위에서 설명했지만, 존재 또는 존재하지 않는 요소와 메서드들에 대해 안전하게 접근할 수 있도록 도와주는 옵셔널 체이닝 연산자를 통해 더 쉽게 해결할 수 있다.

사용 방법은 그냥 앞에 ?를 붙여주면 된다.

 

그러면 값이 누락될 경우에 옵셔널 체이닝을 붙여주면 프로그램의 안정성을 높여줄 수 있다.

 

import React from 'react'

const getNonEmptyCategories = (catrgories) => (
    categories.filter((category) => category.items > 0);
)

// categories = [ {items: 5, id: 0}, {items: 4, id: 0} ]
// index = 1
const App = ({ categories, index }) => {
    const filterCategory = getNonEmptyCategories(categories);
    
    const filterCategoryValue = filterCategory[index]?.items // 요기

    return (
        <span>{filterCategoryValue}</span>
    )
}

export default App;

이러면 해결이 된다.

옵셔널 체이닝은 여기까지 보면 장점만 있는 것 같지만 단점도 존재한다.

추후에 오류를 발견하기 어렵기도 하고, 에러 디버깅 등 추후 유지보수가 좋지 않으므로 남용하지 않는 것이 중요하다.

 

쓰기보단 읽기(배열, 함수, 변수 등등)에서 주로 사용한다는 것도 알아두자!