9. Conditional-rendering ( &&, 삼항연산자, Optional Chaining )

Conditional-rendering(조건부 렌더링)의 종류와 쓰임

1. &&

(변수or객체) && (앞 변수가 참이면 나오는 변수 or 객체)

예시)

<div>data && {"true"}</div>

 &&의 앞에 있는 값을 확인하고 그 값이 트루시하면 뒤의 코드를 실행하게 된다 (내 생각에는 && 연산자는 and를 나타내고 and는 두 요소 중 하나라도 false면 false가 되기 때문에 앞의 값을 읽고 false이면 뒤에 값은 볼 필요가 없기 때문으로 보인다.) 위 예시 코드는 data 값이 트루시하면 true가 div에 입력되게 된다.

 

2. 삼항 연산자

삼항 연산자는 자바스크립트에서 세 개의 피연사자를 받는 유일한 연산자로 구조는 

(조건문) ? (참일 때의 실행식) : (거짓일 때의 실행식)

형태로 나타나며 if ~else문의 대체제로 많이 사용됩니다. 조건문이 참이면 참일 때의 실행식이 실행되고 거짓이면 거짓일 때의 실행식이 실행됩니다.

 

예시)

data ? "참" : "거짓";

 

위 예시 코드를 예를 들면 data의 값이 참이면 "참"이 거짓이면 "거짓"을 쓰게 된다.

 

3. Optional Chaining

Optional Chaining(?.)은 property가 없는 중첩 객체(ex)객체 안의 객체)에 에러 없이 안전하게 접근할 수 있게 해주는 연산자로 연산자 앞의 대상이 undefined나 null이면 접근을 멈추고 undefined를 반환하는 형식으로 동작합니다. 이로 인해서 프로퍼티가 없는 객체 즉 undefined나 null인 객체에 접근하여 생기는 에러를 멈출 수 있습니다.

(변수or객체) ?. (연산 앞의 변수가 트루시한 값을 가지면 나오는 변수or객체)?.(연산 앞의 변수가 트루시한 값을 가지면 나오는 변수or객체)........

예시)

user?.address?.street

위 예시 코드를 예로 들면 user에 프로퍼티가 존재하면(null, undefined가 아니면) address로 접근하고 또 거기서 address가 프로퍼티가 존재하면 street값에 접근하는 방식으로 진행됩니다. 접근 시마다 사용해서 값을 판단하고 접근할 수 있게 해줍니다.