React 조건부 렌더링과 옵셔널 체이닝

조건부 렌더링

---

if 문

• JSX문 안에서는 if문을 사용할 수 없지만 함수 내부에서 조건에 따라 return 으로 다른 렌더링을 하게 처리할 수 있다.

const App = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  }
  return <p>Please log in.</p>;
};

삼항 연산자

• 조건의 true, false에 따라 렌더링을 하게 처리할 수 있다.

const App = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};

&& 연산자

• 조건의 true, false에 따라 렌더링을 하게 처리할수 있다.
• 조건이 false라면 undefined로 처리되기 때문에 리액트에서 아무것도 렌더링하지 않는다.

const App = ({ isLoggedIn }) => {
  return <div>{isLoggedIn && <p>Welcome back!</p>}</div>;
};

주의)
&& 앞의 값이 falsy한 값이라면 해당값을 그대로 화면에 렌더링하기 때문에, boolean값을 사용해야 한다. ex)false, undefined, null
리액트에서는 false, null, undefined는 화면에 아무런 값도 출력되지 않기 때문이다.

옵셔널 체이닝

---

? 연산자

• ? 앞 대상이 undefined 또는 null이면 뒤의 평가를 멈추고, undefined를 반환한다.

주의)
? 앞의 값이 falsy한 값이라면 해당값을 그대로 화면에 렌더링하기 때문에, boolean값을 사용해야 한다. ex)false, undefined, null
리액트에서는 false, null, undefined는 화면에 아무런 값도 출력되지 않기 때문이다.