JSX (2)

- 개요

JSX로 작성된 코드에서 JavaScript를 사용하는 방법을 알아본다

 

- 예제

let text = 'Hello, world!';
const num = 15;
const obj = { key: 0, a: 1, b: 2 };
const arr = ['a', 'b', 'c'];
const imageUrl =
  'https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg';

 

사용하는 코드는 위와 같다

위와 같이 JS로 작성된 변수들을 선언하였다

• 문자열 변수
• 숫자 변수
• JS 오브젝트 변수
• 배열 변수
• 이미지 경로를 담은 문자열 변수

 

1) 문자열과 숫자 데이터

import ReactDOM from 'react-dom';

const element = (
  <div>
    <h1>변수 넣기</h1>
    <ul>
      <li>{text}</li>
      <li>{text + 'test'}</li>
    </ul>
    <h1>숫자 및 계산식 넣기</h1>
    <ul>
      <li>{num}</li>
      <li>{num + 15}</li>
    </ul>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

JSX 내부에서 JS 변수를 사용하기 위해서는 반드시 "{ , }(중괄호)"를 사용하여 감싸야 한다

위의 코드에서는 문자열 데이터와 숫자 데이터를 JSX 코드에서 사용하고

JSX를 사용하여 React에서 렌더링한다

 

 

실행 결과는 위와 같다

 

2) 불리언과 null 데이터

import ReactDOM from 'react-dom';

const element = (
  <div>
    <h1>Boolean, Nullish 값 넣기</h1>
    <ul>
      <li>{true}</li>
      <li>{false}</li>
      <li>{undefined}</li>
      <li>{null}</li>
    </ul>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

다음으로 불리언 데이터와 null 데이터를 사용한다

해당 JS 변수들은 조건 판별에 사용한다

 

 

실행 결과는 위와 같다

불리언 변수와 nullish 변수들은 조건부 렌더링에 사용하므로

따로 화면에 표시하지 않는다

 

3) JS 오브젝트와 배열 데이터

import ReactDOM from 'react-dom';

const element = (
  <div>
    <h1>Object, Array 넣기</h1>
    <ul>
      {/* <li>{obj}</li> */}
      <li>{obj.key}</li>
      <li>{arr}</li>
      <li>{[<div>111</div>, <div>222</div>, <div>333</div>]}</li>
    </ul>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

JS 오브젝트를 JSX 코드에서 사용하기 위해서는

JS 오브젝트를 그대로 사용하는 것이 아닌 "obj.key"와 같이 JS 오브젝트의 구체적인 값을 지정해야 한다

배열 데이터를 사용하게 되면 배열을 구성하는 데이터들을 하나씩 꺼내어 렌더링한다

배열 데이터의 특성을 이용하여 위와 같이 여러개의 데이터를 하나로 모아 렌더링하는 것이 가능하다

 

 

실행 결과는 위와 같다

JS 오브젝트의 key에 해당하는 값을 표현하고

2개의 배열 오브젝트를 사용하여 화면에 표시하였다

 

4) JSX 태그에 속성 전달

import ReactDOM from 'react-dom';

const element = (
  <div>
    <h1>태그 속성에 넣기</h1>
    <ul>
      <li>
        <img src={imageUrl} alt="logo" />
      </li>
    </ul>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

JSX 태그에 JS 데이터를 속성으로 전달하는 경우에도 중괄호를 사용해야 한다

위해서는 이미지 경로의 문자열을 중괄호로 감싸 src 태그의 속성으로 전달하고 있다

 

 

실행 결과는 위와 같다