조건부렌더링, Template Literal

조건부렌더링

javascript에서는 코드가 상단 부분부터 순서대로 실행되게 되는데 요청을 받고 응답이 오기까지 시간이 걸리는 경우가 있고 그로 인해 에러가 발생하기도 한다.
따라서 화면을 미리 그려놓고 데이터를 받아오게 되는데 이것을 조건부렌더링이라고 한다.

조건부렌더링에는 &&연산자, Optional-Chaining, 삼항 연산자, Nullish-coalescing이 있다.

&&연산자는 && 앞의 값이 true면 뒤에 값을 보여준다.
ex) data && data.fetchBoard.title → data 먼저 보여주고 data.fetchBoard.title 보여주기

📌 참고 : data || data.fetchBoard.title의 경우 || 앞의 값이 true면 앞에 값을 보여준다.

Optional-Chaining은 &&연산자를 간단히 줄여 ?로 표시한다.
ex) data && data.fetchBoard.title → data?.fetchBoard.title

삼항연산자는 데이터가 받아오기 전 미리 표시를 해주는 것을 말하며, ?와 :을 같이 써주어야 한다.
ex) data? data.fetchBoard.title : "로딩중.." → 화면에 먼저 로딩중.. 표시 후에 data 값 표시

Nullish-coalescing은 거짓(false) 중에서도 null 또는 undefined 값이면 ?? 뒤에 값을 보여준다.
ex) data ?? data.fetchBoard.title → data가 null이면 ?? 뒤에 값을 표시

Template Literal

템플릿 리터럴은 여러 변수와 문자를 함께 쓸 수 있는 도구를 말한다.

예를 들어,
let name = 27 이고 '나는 27살 입니다'라는 문구를 만들 때

평범한 방식= "나는 " + name + "살 입니다." 라고 문자에 전부 큰따움표("")를 붙였다면
템플릿 리터럴 방식 = '나는 ${name}살 입니다.' 표현해야하는 부분을 전부 백틱(``)으로 묶어서 사용하고 +로 연결할 필요 없이 문자는 그대로 적고 변수에는 ${ }를 붙여서 사용한다.