2.React에서 쓰이는 언어 JSX의 의미와 사용법

JSX란?

 

Javascript를 확장한 문법으로 Javascript XML 즉, Javascript + HTML 이 합쳐진 문법입니다.

 

JSX의 특징

- JSX에서 사용되는 태그의 속성이 기존 HTML과 다른 부분이 존재함

- 태그를 명시적으로 닫아줘야 함

- 하나의 태그로 감싸져 있어야 함

 

 

JSX의 변수 사용법

import ReactDOM from 'react-dom';

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';

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>
    <h1>Boolean, Nullish 값 넣기</h1>
    <ul>
      <li>{true}</li>
      <li>{false}</li>
      <li>{undefined}</li>
      <li>{null}</li>
    </ul>
    <h1>Object, Array 넣기</h1>
    <ul>
      {/* <li>{obj}</li> */}
      <li>{arr}</li>
    </ul>
    <h1>주석 넣기</h1>
    <ul>
      <li>{/* 주석입니다. */}</li>
    </ul>
    <h1>태그 속석에 넣기</h1>
    <ul>
      <li>
        <img src={imageUrl} alt="logo" />
      </li>
    </ul>
  </div>
);

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

 

 

보시다시피 JSX는 Object형태를 변수로 지정할 수 없습니다.

 

JSX의 조건문 사용법

import ReactDOM from 'react-dom';

const arr = [1, 2, 3];
const text = '';

const element = (
  <div>
    <h1>삼항연산자</h1>
    <ul>
      <li>
        {1 + 1 === 2
          ? '참입니다.'
          : '거짓입니다.'}
      </li>
    </ul>

    <h1>AND 연산자</h1>
    <ul>
      <li>{1 + 1 === 2 && 'AND 연산자1'}</li>
      <li>{arr.length && 'AND 연산자2'}</li>
    </ul>

    <h1>OR 연산자</h1>
    <ul>
      <li>{1 + 1 !== 2 || 'OR 연산자1'}</li>
      <li>{text || 'OR 연산자2'}</li>
    </ul>

    <h1>IF문 (즉시실행함수)</h1>
    <ul>
      <li>
        {(() => {
          if (1 + 1 === 2) return 'IF';
          else return 'ELSE';
        })()}
      </li>
      <li>
        {(() => {
          const data = '즉시실행함수';

          /* 어떤 연산이든 추가 가능 */
          /* 일반적으로는 이렇게 즉시실행함수가
         미리 위에서 가공하여 전달 */

          return data;
        })()}
      </li>
    </ul>
  </div>
);

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

 

 

JSX의 반복문 사용법

import ReactDOM from 'react-dom';

const arr = ['1번', '2번', '3번'];

const arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(<h4>{arr[i]}</h4>);
  // = [<h4>1번</h4>, <h4>2번</h4>, <h4>3번</h4>]
}

const element = (
  <div>
    <h1>배열로 넣기</h1>
    <ul>
      <li>{arr}</li>
      <li>{arr2}</li>
    </ul>

    <hr />

    <h1>Array.map</h1>
    <ul>
      <li>
        {arr.map((item) => {
          return <h4>{item}</h4>;
        })}
      </li>
    </ul>
  </div>
);

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

 

JSX의 스타일 사용법

import './index.css';

import ReactDOM from 'react-dom';

// 2. style 재활용
const roundBoxStyle = {
  position: 'absolute',
  top: 50,
  left: 50,
  width: '50%',
  height: '200px',
  padding: 20,
  background: 'rgba(162,216,235,0.6)',
  // 3. 속성은 camelCase
  borderRadius: 50
};

const element = (
  <div
    style={{
      // 1. Object로 css 작성
      position: 'relative',
      width: 400,
      height: 1000,
      background: '#f1f1f1'
    }}
  >
    <div style={roundBoxStyle}>Hello1</div>

    <div style={{ ...roundBoxStyle, top: 350 }}>
      {/* 4. className을 통한 스타일링 (CSS-in-JS) */}
      <div className="highlight">Hello2</div>
    </div>

    <div style={{ ...roundBoxStyle, top: 650 }}>
      {/* 5. 조건적 스타일 */}
      <div
        className={
          1 + 1 === 2 ? 'highlight' : false
        }
      >
        Hello3
      </div>
    </div>
  </div>
);

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

 

 

 

 

 

 

 

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard