2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

    개발하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있습니다. 이럴 때도 조건부 연산자를 통해 구현할 수는 있습니다.

    src/App.js

    import React from 'react';
     
    function App() {
      const name = '뤼왝트';
      return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
    }
     
    export default App;

     

    위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.