출처: https://www.codecademy.com

JSX 코드 내 자바스크립트 코드 사용 - 중괄호

JSX 코드는 자바스크립트 코드보단 HTML코드에 가깝기 때문에 <h1> 2 + 3 </h1> 같은 코드를 그냥 text로 간주하여 ‘2 + 3’ 을 화면에 표시한다.

그렇다면 JSX코드 사이에 자바스크립트 코드를 이용하고 싶을 땐?! { } 중괄호 를 사용하면 된다.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // Write code here:
    ReactDOM.render(
      <h1>2 + 3 = {2 + 3}</h1>,
      document.getElementById('app')
    );

화면에 ‘2 + 3 = 5’ 가 출력됨

## JSX 에서의 조건문의 사용

JSX코드에 if 문을 단순 삽입하는것은 불가능하다.

if와 else 키워드가 JSX코드에 끼워져 들어가는것이 아니라 바깥에 감싸듯이 위치해 있어야 한다.

 예) 오류 
 
    (
      <h1>
        {
          if (purchase.complete) {
            'Thank you for placing an order!'
          }
        }
      </h1>
    )

–

 예) 정상
 
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function coinToss() {
      // This function will randomly return either 'heads' or 'tails'.
      return Math.random() < 0.5 ? 'heads' : 'tails';
    }
    
    const pics = {
      kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
      doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
    };
    let img;
    
    // if/else statement begins here:
    if (coinToss() === 'heads') {
      img = (
        <img src={pics.kitty} />
      );
    } else {
      img = ( 
        <img src={pics.doggy} />
      );
    }
    
    ReactDOM.render(img, document.getElementById('app'));


React에서의 Ternary Operator(삼항연산자) 사용

삼항연산자를 사용하면 JSX코드 내에서 조건문을 사용하는것이 가능하다!

그렇기 때문에 React에서 삼항연산자가 자주 쓰이므로 확인해두자.

    const headline = (
      <h1>
        { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
      </h1>
    );


&& Operation

또한, && 연산자를 조건문으로 JSX코드 내에서 사용할 수 있다.

    const tasty = (
      <ul>
        <li>Applesauce</li>
        { age > 15 && <li>Brussels Sprouts</li> }
        { age > 20 && <li>Oysters</li> }
        { age > 25 && <li>Grappa</li> }
      </ul>
    );

위 코드는 age > 숫자 에 해당하는 값이 참일 경우에만 <li> 태그의 내용이 보여지게 된다.

&& 연산자는 참일경우에만 수행하고 거짓을 경우엔 아무 액션도 취하지 않는 경우에 가장 유용하게 사용된다.