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

조건부 렌더링(Conditional-rendering )

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.
if나 조건부 연산자(삼항연산자)와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만든는 데에 사용한다. *리액트 공식문서

쉽게 말해 조건에 따라 현재 보여주고 싶은 상태를 보여줄 수 있게 된다.
자바스크립트는 기본적으로 콜스택(call stack)방식이기 때문에 코드가 위에서부터 차례대로 실행되고, 다 실행된 후에 화면에 보여준다.
하지만 그 과정에서 데이터가 너무 많은 경우는 화면에 보여주기까지 시간이 걸리기에 흰색 화면만 나오는 경우가 있을 수 있다.
그런 경우에 조건부 렌더링을 사용하게 되면 데이터를 받아오기 전에 먼저 보여준 후에 받은 데이터를 다음에 보여주는 방식으로도 사용하는 방법도 있다.

예시코드

// 아래 두 코드가 있다고 가정
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

// 사용자의 로그인 상태에 맞게 컴포넌트 중 하나를 보여주는 컴포넌트
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

위 예시를 실행하게 되면 isLoggedIn prop에 따라서 다른 인사말을 렌더링을 하게 된다.

삼항연산자

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

let age = 26;
let beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
// 간단한 예시

Optional chaining

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. *mdn 공식문서

Optional chaining 연산자는 참조나 기능이 udnefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.
예를 들어 주소 정보를 불러와야 하는 경우에 그 주소 정보를 가지고 있지 않다면 에러가 발생할 수 있다.
Optional chaining은 평가 대상이 즉, 주소 정보를 통해 가지고 온 데이터가 undefined 나 null 이면 평가를 멈추고 null 이나 undefined를 반환한다.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.
// 간단한 예시