Conditional-rendering(조건부 렌더링)

javascript는 작성된 코드가 상단에서부터 순서대로 실행되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 입니다. 그러면 사용자들이 페이지에 들어와서, 느리다고 생각하거나 기다려야 하는 일들이 많겠지요!

이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓기 위해서 조건부렌더링을 사용합니다.

💡 조건부 렌더링에는 &&연산자, 삼항연산자, 옵셔널체이닝이 있습니다.

1. 삼항연산자

조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

구문

condition ? exprIfTrue : exprIfFalse
condition이 true일 경우 exprIfTrue, false일 경우 exprIfFalse!

간단한 예제

var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

null 일 수 있는 값을 처리해보자

let greeting = person => {
  let name = person ? person.name : `stranger`
  return `Howdy, ${name}`
}

console.log(greeting({name: `Alice`}));  // "Howdy, Alice"
console.log(greeting(null));             // "Howdy, stranger"

조건 연산자 연결해서 사용하기

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

💡 참고자료 MDN

2. 논리 and 연산자(&&연산자)

논리 AND 연산자(&&)는 두 피연산자가 모두 이 true 면 를 반환 true 하고, 그렇지 않으면 를 반환합니다false.

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

💡 if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

💡 &&의 우선순위가 ||보다 높습니다.
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다.
따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다.

💡참고자료

3. 옵셔널체이닝

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다.

obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽습니다. ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행합니다.

?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있습니다.

?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다.

꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 합시다.

💡 참고자료