Conditional-rendering... 영어로 보면 참 어려운 말 같지만 번역하면 '조건부 렌더링'이다!
말 그대로 렌더링 시 조건을 붙인다고 생각하면 될 것 같다.

1. Rendering (렌더링)이란?

렌더링이란, 서버로부터 HTML 파일을 전달받아 브라우저에 뿌려주는 것을 말한다.
우리가 만든 파일이 브라우저에 보여지는 과정을 의미한다.

2. Conditional-rendering (조건부 렌더링)이란?

조건부 렌더링이란, 특정 조건에 따라 결과물을 다르게 렌더링하는 것을 말한다.
React에서는 특정 컴포넌트를 생성하여 컴포넌트에 따라 다른 동작을 수행할 수 있으며, state를 활용하여 특정 일부만 렌더링할 수도 있다.

3. 조건부 렌더링 살펴보기

1) if ~ else ~

if (조건) { 조건 참일 때 렌더링할 요소} else {조건 거짓일 때 렌더링할 요소}

if else를 사용하면 특정 컴포넌트 전체의 렌더링 여부가 결정된다.
(아래의 코드에서 props를 활용한 것을 살펴볼 수 있다!)

if (data) {
	data.fetchProfile
  } else {
  	undefined
   }

2) 삼항 연산자

조건 ? 조건 참일 때 렌더링할 요소 : 조건 거짓일 때 렌더링할 요소

data ? data.fetchProfile : undefined

3) &&연산자 / ||연산자

조건 && 조건이 참일 때 렌더링할 요소
조건 || 조건이 거짓일 때 렌더링할 요소

&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환한다.
||연산자는 데이터가 참일 경우 자동으로 데이터를 반환한다.

data && data.fetchProfile

4) optional-chaining (옵셔널 체이닝)

조건?. 있으면 렌더링할 요소

옵셔널 체이닝은 데이터가 없을 경우 자동으로 undefined를 반환한다.

data?.fetchProfile

5) nullish-coalescing

조건 ?? 조건이 null 또는 undefined일 때 렌더링할 요소

data ?? data.fetchProfile

참조
: https://koras02.tistory.com/m/130