Optional Chaining

Obtional Chaining을 쓰게 된 이유

React를 쓰면서부터 렌더링에대해 고민을 많이 하게됐다.
API통신을 통해 데이터를 받아와서 페이지에 보여주기만 했는데
자꾸 값이 없다고 에러가 떴다.

처음에는 엄청 답답했지만 해결하지 못했다. (ㅜㅜ)

시간이 지나서 API통신이 비동기 처리라는 것을 알게되었다.
이걸 알고나니까 문득 머릿속을 스쳐가는게 있었다.
보통

    useEffect(() => {
        fetchAlgorithmTag().then(res => {
            setAlgos(res.data.data);
        });     
    }, []);

이런식으로 useEffect에서 렌더링때 필요한 data들을 받아오고 페이지에 보여줬는데
통신보다 페이지를 그리는 것이 더 빠르면 내가 생각한대로(데이터를 받아와서 데이터를 페이지에 보여주는 방식) 흘러가지 않아 페이지에 데이터가 없다는 에러가 떴을 수 있겠다는 생각이 들었다.

그렇다면 내가 할 수 있는 방법은 두가지였다.
1. 데이터가 들어올 때까지 페이지 그리는 것을 늦추기
2. 일단 그리고 데이터가 들어오면 페이지에 바로 반영해주기

나는 1번째 방법이 너무 마음에 들었지만 아직 방법을 모르겠다 ㅎㅎ;;

대신 두번째는 어느정도 감이 잡혔었다.

왜냐하면 페이지내에서 필터링이나 검색을 했을 때, 데이터를 다시 받아오지만 그렇다고 페이지를 또 그리지는 않으니까 가능하다고 생각했다.

Obtional Chaining이란?

또 서론이 너무 길었다. 바로 코드를 가져오겠다.

let user = useSelector(state => state.user);
const user_id = user?.login?.user?.id;

프로젝트때 썼던 코드이다
useSelector로 유저정보를 가져와서 처리해주려했다.
하지만 로그인을 하지않은 익명의 유저라면 이 값이 undefined가 뜰 것이다.
그 경우를 방지하기 위해서 undefined이 예상되는 요소에 ?를 붙여주면 Obtional Chaining을 사용해서 검사를 할 수 있고 undefined이 반환되면 에러를 발생시키는 것이 아니라 값을 undefined으로 받아와 쉽게 예외 처리를 할 수 있다.

사용하지 않는다면?

만약 Obtional Chaining을 하지않을 경우

const user_id = user?.login?.user?.id;

이 코드는

let user_id = null;
if (user === undefined) {
  user_id = undefined}
if (user.login === undefined) {
  user_id = undefined}
if (user.login.user === undefined) {
  user_id = undefined}
else {user_id = user.login.user.id;}

이렇게 사용해야 됐을 것이다.
딱봐도 복잡하다. 그리고 사용하고싶은 코드는 (성공해야하는 코드는) 맨 마지막 한줄인데 이것을 위해 너무 많은 예외처리를 해줘야하기때문에 좋은 코드는 아니다.
하지만 Obtional Chaining을 사용한다면 쉽고 간결하게 코드를 짤 수 있다!!

=