조건부 렌더링 (? , && , ||)

• ? 연산자 (삼항 연산자) => 조건에 따라 두 가지 중 하나를 렌더링할 때 사용 => 조건 ? true일 때 : false일 때 => true와 false일 때를 모두 작성해야 합니다.

• && 연산자 => 삼항 연산자의 대체 방식 => 조건 && true일 때 => true일 때만 렌더링할 경우 사용합니다.

• 옵셔널 체이닝 (Optional-Chaining) => 객체?.속성 => 값이 없을 수 있는 객체의 속성에 안전하게 접근하는 연산자로, && 연산자로 길어지던 코드를 간결하게 만들어 줍니다. => 값이 없으면 에러 대신 undefined를 반환합니다.

{ data ? data.boards.map() : <div></div> } // ? 연산자
{ data && data.boards.map() } // && 연산자
{ data?.boards.map() } // 옵셔널체이닝

try ~ catch

try {
// try에 있는 내용을 시도하다가 실패하면 , 다음에 있는 모든 줄들을 모두 무시하고, catch에 있는 내용이 실행됨
	await createBoard({
    	variables: {
        	name: "훈이",
            password: "1234",
            title: "안녕하세요 훈이에요",
            contents: "반갑습니다"
        }
 	})
} catch(error) {
	alert(error.message)     
	// 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지
} finally {
	// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
	// 필요없다면 생략 가능
}

데이터가 삭제되었거나 없을 수 있는 경우 try ~ catch로 예외 처리를 할 수 있습니다.