ch03.JSX 문법(2)

JSX 문법

3) IF문 대신 조건부 연산자

• JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다.
• JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용해야 된다.

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

실행 결과

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

• 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않을 때 사용
• null을 렌더링 하면 아무것도 보여주지 않는다.
• &&연산자를 사용하면 더 짧은 코드로 조건부 렌더링이 가능하다.
• &&연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
• 단, 0은 예외적으로 화면에 나타난다.

function App() {
    //const name = '리웹트';
    //null  랜더링시 아무것도 보여주지 않는다.
    /*
    return (
      <div>
        {name === '리액트' ? 
          <h1>리액트입니다.</h1> : null}
      </div>
    );
    */
    //false 를 렌더링시 null과 같이 아무것도 나타나지 x , 단) 0은 예외적으로 화면에 나타난다
    const name = '리웹트';
    const number = 0;
    return (
      <div>
        {name === '리액트' && <h1>리액트입니다.</h1>}
        {number && <h1>내용.</h1>}
      </div>
    );
  }
  export default App;

5) undefined를 렌더링 하지 않기

• undefined를 반환하여 렌더링 하는 상황을 만들면 안된다.(오류 발생)
• OR(||) 연산자를 사용하여 해당값이 undefined일 때 사용할 값을 지정할 수 있기 때문에 오류 방지 가능

function App() {
  const name = undefined;
  //return name;//JSX 오류
  //return name || '값이 undefined입니다';//OR 연산자로 오류 방지
  //return <div>값이 {name}입니다</div>;//JSX 내부에서 undefined 렌더링 가능
  return <div>{name || '리엑트'}</div>;//undefined 일떄 표시할 값 렌더링
}
export default App;