Conditional rendering

조건부 렌더링(Conditional-rendering)

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다. -React 공식홈페이지-

즉 조건부 렌더링은 자바스크립트에서 동작하는 것처럼 if나 조건 연산자와 같은 자바스크립트 연산자를 사용하여 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.

홈페이지를 제작하다 보면 특정 조건에 따라 다른 컴포넌트를 보여주고 싶을 때가 있다. 예를들어 로그인, 회원가입 버튼이 있다. 로그인을 하지 않은 상태에는 로그인 버튼이 보여져야하고, 로그인을 한 상태에서는 로그인 버튼이 사라지고 로그아웃 버튼이 렌더링 되어야 한다. 이 경우 조건부 렌더링을 사용할 수 있다.

조건부 렌더링에는 논리연산자, 삼항연산자, 옵셔널텍스트 체이닝이 있다.

논리 연산자 && (logical operator)

• (선행조건)&&(후행조건)
• 선행조건이 참이어야만 후행 조건을 평가하고, 후행 조건을 평가한 결과를 반환한다.
• 앞의 값이 참일 경우에만 뒤의 값을 보여준다.
• 데이터가 없을 경우 자동으로 undefined를 반환한다.

data && data.fetchProfile
//data 가 참이면 data.fetchProfile 반환 

(true && 'Hello')
//'Hello'

반대로 || 연산자는 앞의 값이 거짓일 경우 뒤의 값을 보여준다.

삼항 연산자 (ternary operator)

• JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다.
• 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어가고 바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어간다.
• 보통 if 명령문의 단축 형태로 쓰인다.

조건문 ? 참일 때 실행할 식: 거짓일 때 실행할 식 

조건문: 조건문으로 들어갈 표현식
참일 때 실행할 식: 조건문이 Truthy일 때 실행되는 표현식 (true일 때 치환될 값)
거짓일 때 실행할 식:조건문이 falsy일 때 실행되는 표현식 (false일 때 치환될 값)

false외에도 null,NaN, 0, 비어있는 문자 값 (""), 그리고 undefined으로 조건문에 false 값으로 사용 가능하며, 이 값들이 조건문으로 사용된다면 (거짓일 때 실행할 식)이 결과로 나오게 된다.

옵셔널 체이닝(optional-chaining)

• ?.
• 최신문법 since ES2020
• ?. '앞'의 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
• 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 만들어준다.

data?.fetchProfile
//undefined

Nullish-coalescing

옵셔널 체이닝 처럼 많이 사용하는 것은 아니지만, 같은 ES11문법에서 나온 nullish coalescing은 만약 왼쪽 표현식이 null 또는 undefined인 경우, 오른쪽 표현식의 결과를 반환한다.

leftExpr ?? rightExpr

참고 및 출처
https://dream-frontend.tistory.com/328
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator