[Javascript] 삼항연산자 / 조건부 렌더링 / 옵셔널 체이닝

삼항연산자란?

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

삼항연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. 기본 형태는 위와 같으며, 물음표와 콜론을 기준으로 조건문, 각각 True/False일때 실행할 식을 입력한다.

 

if 명령문의 단축 형태로 주로 쓰이며 잘 활용하면 코드를 간결하게 만들 수 있다.

 

예시

props.isEdit ? "수정":"등록"
// props.isEdit의 값이 True일 경우 "수정"을 반환한다.
// props.isEdit의 값이 False일 경우 "등록"을 반환한다.

 

조건부 렌더링

'조건문' && '값이 참일 경우 실행할 식'

일정 조건 하에서만 식을 수행할 것을 명령하는 방법. 조건문이 참일 경우에만 && 뒤의 명령어를 실행한다.

 

예시

// React에서의 용례

{ data && data.fetchBoard.writer }
// data의 값이 성공적으로 import 되었을 때만 && 뒤의 값을 렌더링한다.

 

옵셔널 체이닝 | Optional-Chaining

data?.fetchBoard.writer

옵셔널 체이닝 연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고도 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 연산자와 유사하게 작동하지만, 만약 참조가 nullish라면 에러가 발생하는 대신 표현식의 리턴 값을 undefined로 반환한다.

 

상단의 예시의 경우, data가 nullish일 경우 구문의 값을 undefined로 반환하고, data 값이 존재할 경우 연산자 뒤에 있는 객체의 값을 읽어온다.

 

* nullish란?

단순 False가 아니라 '비어있는 것'들을 이야기하는 것. null 이거나 undefined일 경우를 뜻한다.

 

추가

조건부 렌더링은 이러한 방식으로도 사용이 가능하다.

data || data.fetchProfile
// data가 False일 경우 || 뒤의 것을 렌더링한다.

 

조건문의 값이 null일 경우 뒤의 내용을 렌더링하는 nullish-coalescing도 있다.

data ?? data.fetchProfile
// data가 비어있을 경우(null or undefined) ?? 뒤의 내용을 렌더링한다.