옵셔널 체이닝

- 사용 이유 : 들어오는 데이터에 값이 있는 경우가 있을 수 있고, 없는 경우가 있을 수 있다. 이럴 때 각 화면을 다르게 보여줄 필요가 있을 때, 옵셔널 체이닝을 사용하면 편리하게 해당 화면을 구현할 수 있다. (예 : 에러페이지 같은 경우..)

 

나의 경우에는, id 값에 따라서 들어오는 데이터가 있는데,

id 값이 없을 경우에는 데이터에 없는 내용을 직접 하드코딩을 해서 해당 내용을 넣어줘야 하는 상황이었기 때문에

옵셔널 체이닝을 사용하였다.

(들어오는 데이터가 있으면 해당 내용을 그대로 Text로 뿌려주면 되고,

그게 아니면 Text에 내가 직접 하드코딩한 내용의 페이지를 보여줘야 하는 상황이었다.)

 

일단 서론이 길었는데, 본론으로 들어가보자.

 

옵셔널 체이닝을 만들기 위해서는 React의 useState와 useEffect 함수를 사용해야 한다.

 

import React, {useEffect, useState) from 'react';
import {getRequest} from 'apis/common'; // axios를 이용해서 직접 만든 api 컴포넌트이다.
import {useRoute} from '@react-navigation/native';

export const OptionalChaining = () => {
	const route = useRoute();
    const [isApi, setIsApi] = useState();
    const [isExistId, setIsExistId] = useState(true);
    
    const getApi = async() => {
    	try {
        	const result = await getRequest(
            	`/board/${route.params?.id}/`,
            );
            setIsApi(result.result);
        } catch(e) {
        	console.log(e);
        }
    };
    
    useEffect(() => {
    	getApi();
        if(route.params?.id === null) {
        	setIsExistId(false);
        }
    }, []);
    
    return (
    	<View>
        	//route의 parameter로 id가 받아지면 정상 페이지.
        	{isExistId && <Text>{isApi?.content}</Text>}
            //route의 parameter로 받아지는 아이디가 없다면 에러 페이지.
            {isExistId || <Text>(에러) 서버에 문제가 생겼습니다. 관리자에게 문의하세요.</Text>}
        </View>
    );
};

이런식으로 구현하면 된다.

(티스토리가 줄맞춤이 제대로 안되는 것 같다.. -_- 일부러 줄 맞춰서 코딩했는데 은근히 스트레스네..ㅜ)

 

여튼,, 내가 원하는 값이 true 상태이면 isApi 스테이트 안의 content 값을 보여주는거고,

내가 원하는 값이 false 상태이면 에러 메세지를 띄우는 거다.

 

참고로 true 는 &&

false 는 || 로 표시하면 된다.

 

오늘의 코드 정리 끝!!