[React] JSX

JSX

- React에서 지원, javascript와 html을 섞어서 쓸 수 있는 javascript의 확장된 문법

※ 주의할 점

- JSX는 javascript의 확장 문법이기 때문에 html문법을 완전히 그대로 사용할 수 없음

ex) class 속성

import ReactDOM from 'react-dom';

class Dice {
  roll() {
    console.log('Roll!');
  }
}

// html - class 속성 그대로 사용 불가
/*ReactDOM.render(<p class="hello">안녕 리액트!</p>, document.getElementById('root'));*/ 

// JSX - className 속성으로 사용해야함
ReactDOM.render(<p className="hello">안녕 리액트!</p>,document.getElementById('root'));

ex) for 속성 - label태그에서 input태그와 함께 사용 되는 속성

import ReactDOM from 'react-dom';

//html - for속성 그대로 사용 불가
ReactDOM.render(
	<form>
      <label for="name">이름<label>
      <input id="name" type="text" />
    </from>,
    document.getElementById('root'));
    
    
//JSX - htmlFor속성으로 사용
ReactDOM.render(
	<form>
      <label htmlFor="name">이름<label>
      <input id="name" type="text" />
    </from>,
    document.getElementById('root'));

ex) 이벤트 핸들러 작성법

- 두번째 문자 이후부터 대문자로 작성해야함 (camelcase)

import ReactDOM from 'react-dom';

ReactDOM.render(
	<form>
      <label htmlFor="name">이름<label>
      <input id="name" type="text" onBlur="" onFocus="" onMounseDown=""/>
    </from>,
    document.getElementById('root'));

 

 

- JSX는 실행될 때 javascript문법으로 변환되어 실행 됨

- {} 중괄호 안에 변수 값 할당

- {} 중괄호 안에는 javascript 표현식만 사용 가능하며 if문 ,for문 혹은 함수 선언과 같은 문장은 사용할 수 없음

import ReactDOM from 'react-dom';

const product = '맥북'

ReactDOM.render(
  <h1>나만의 {product} 주문하기</h1>, // {}중괄호로 변수 감싸기
  document.getElementById('root')
);

import ReactDOM from 'react-dom';

const product = 'Macbook'

ReactDOM.render(
  <h1>나만의 {product.toUpperCase()} 주문하기</h1>, //메소드 사용가능
  document.getElementById('root')
);

import ReactDOM from 'react-dom';

const product = 'Macbook'
const model = 'Air';
const item = product + model;
const imageUrl = 'https://forum-creallo.s3.dualstack.ap-northeast-2.amazonaws.com/original/1X/5e0d906585d6dbbf7f3c9997484eee594bd01da1.jpeg'

function handleClick() {
  alert('곧 도착합니다!.');
}

ReactDOM.render(
  <>
  <h1>나만의 {item} 주문하기</h1>
  <img src={imageUrl} alt="어피치" />
  <button onClick={handleClick}>확인</button>
  </>,
  document.getElementById('root')
);