[JS] 조건부 렌더링 & try ~ catch

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

• ? 연산자 (삼향 연산자)
  => 초기에는 삼향 연산자만 사용
  => true ? true일떄 작동 : false일떄 작동
  => 삼향 연산자는 true 일경우와 false일 경우 둘다 작성 하지 않으면 오류가 발생

• && 연산자
  => 삼향 연산자의 대체 방식
  => true && true일떄 작동
  => true일 경우에만 작성
  

• 옵셔널 체이닝 (Optional-Chaining)
  => true?.true일떄 작동
  => optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 입니다.
  => 삼항연산자, && 연산자와 똑같은 기능
  

{ 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로 예외처리를 할 수 있어요