[React] 조건부 연산자

- JSX 내부의 JS 표현식에서 if문을 사용할 수는 없다.

- 히지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,  { } 안에 조건부 연산자를
사용하면 된다.

- 조건부 연산자의 또 다른 이름은 삼항 연산자이다.

 

function App() {
  const name = '리액트';
  
  return (
    <div>
        {name === '리액트'?(
            <h1>리액트입니다.</h1>
        ) : (
            <h2>리액트가 아닙니다.</h2>
        )}
    </div>
  );
}

export default App;

 

- name 변수의 값이 '리액트' 인 경우에는 '리액트입니다.' 를 화면에 출력하고, name 변수의 값이 '리액트'가 아닌 경우 '리액트가 아닙니다.' 를 화면에 출력한다.

 

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

 

import './App.css';

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

 

- null을 렌더링하면 아무것도 보여 주지 않는다.

- 위보다 더 짧은 코드로 똑같은 작업을 할 수 있다. 다음과 같이 && 연산자를 사용해서 조건부 렌더링을 할 수 있다.

 

import './App.css';

function App() {
  const name = '뤼왝트';
  return (
    <div>
        {name === '리액트' && <h1>리액트입니다.</h1>}
    </div>
  );
}
export default App;

 

- && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지
않기 때문이다.