조건부 렌더링

조건부 렌더링(Conditional rendering)

fetch api를 이용해서 데이터를 조회할 때는 async,await로 계속 기다리기 보다는 보여줄 수 있는 내용은 먼저 보여주는게 효율적이다. 이 부분이 '조건부 렌더링'이다.
방법은 5가지 정도로 정리해봤다.

1. 삼항연산자

// 조건 ? 조건이 참일때 렌더 : 조건이 거짓일때 렌더
data ? data.fetchBoard : undefined

제일 처음에는 이걸 썼는데, 점점 발전해서 보다 짧게 쓸 수 있게 되었다.

2. &&로 연결하기

data && data.fetchBoard

&& 바로 뒷부분이 데이터 값이 존재할 때 보여줄 결과이다.
데이터가 없을 때는 자동으로 undefined가 할당된다.

3. ||로 연결하기: 앞의 값이 거짓일 때 뒤의 값을 보여준다. (&&와 반대라고 생각하면 편하다)

// 조건 || 거짓이면 렌더 할 것
data || data.fetchBoard

4. 옵셔널 체이닝
   최신 문법으로는 더 간단하게 optional chaining으로도 표현 가능하다.

data?.fetchBoard

5. Nullish-coalescing (es11에서 나온 문법,많이 쓰이진 않는다)
   거짓이 0,false,”” 등 여러가지 타입이 있는데, null같은 타입들에 대해서만 뒤의 값을 보여준다는 뜻이다.

개인적으로 제일 편한건 && 붙이기, 옵셔널 체이닝인거 같다.

참고링크: https://ko.reactjs.org/docs/conditional-rendering.html