JSX

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>안녕리액트!!</h1>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

# 코드 이해

- 아래처럼 모듈을 불러와서 사용하는 것은 원래 브라우저(browser)에는 없던 기능. 이는 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능. 참고로 Node.js는 import가 아닌 require라는 구문으로 패키지를 불러 올 수 있다

import logo from './logo.svg';
import './App.css';

JSX 
- JS에서 사용하는 HTML
- JS의 확장 문법
** 주의 
JSX를 사용할 때는 하나의 태그로 감싸주어야 한다. 
주로 div태그로 감싸주는데 불필요한 div태그를 사용한면은 
별로 보기 안 좋으므로 
<Fragment> 태그로 감사준다 . 
<Fragment> 태그는 <>로 축약해서 사용할 수 있다 

====================================
ex)
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <p>좋은아침</p>
    <p>좋은저녁</p>, 
    document.getElementById('react')
); 

위에처럼 하면은 오류남 
아래처럼 하나의 태그, div태그로 감싸주면 됨 ! 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <div>
        <p>좋은아침</p>
        <p>좋은저녁</p>, 
    </div>,
    document.getElementById('react')
); 

불필요한 div태그를 남발할 수 있으므로 Fragmenet로 감싸주깅 

import ReactDOM from 'react-dom'; 
import { Fragment } from 'react'; 

ReactDOM.render(
    <Fragment>
        <p>좋은아침</p>
        <p>좋은저녁</p>, 
    </Fragment>,
    document.getElementById('react')
); 

Fragmenet태그를 아래처럼 태그 없이 할 수 있당 
ReactDOM.render(
    <> 
        <p>좋은아침</p>
        <p>좋은저녁</p>, 
    </>,
    document.getElementById('react')
); 

===================================


HTML를 JSX로 변환하기 
변환전 


<h1 id="title">가위바위보</h1>
<button class="hand">가위</button>
<button class="hand">바위</button>
<button class="hand">보</button>
===================================
변환후 

import ReactDOM from 'react-dom'; 

ReactDOM.render( 
    <>
        <h1 id='title'>가위바위보</h1>
        <button class='hand'>가위</button>
        <button class='hand'>바위</button>
        <button class='hand'>보</button>    
    </>
    , document.getElementById('root')
); 

======================================================================
JSX에서 자바스크립트 구현하기 
=> 중괄호( {} ) 를 사용하면은 된다 

예제1) 

import ReactDOM from 'react-dom'; 

const product = 'MacBook'; 

ReactDOM.render(
    <h1>나만의 {product} 주문하기 </h1>,  
    document.getElementById('root') 

); 

======================================================================
예제2) 
method도 사용가능하다 


import ReactDOM from 'react-dom'; 

const product = 'MacBook'; 

ReactDOM.render(
    <h1>나만의 {product.toUpperCase()} 주문하기 </h1>,  
    document.getElementById('root')  
); 

======================================================================
예제3) 

이미지도 추가해보기 


import ReactDOM from 'react-dom'; 

const product = 'MacBook'; 
const model = 'Air'; 
const item = product + model; 
const imgUrl = 'https://upload.wikimedia.org/...'

ReactDOM.render(
    <>
        <h1>나만의 {item} 주문하기</h1>, 
        <img src={imgUrl} alt="제품사진"></img>
        <button>확인</button>
    </>,
    document.getElementById('root') 
);

======================================================================
예제4) 
이벤트 추가해보기 


import ReactDOM from 'react-dom'; 

const product = 'MacBook'; 
const model = 'Air'; 
const item = product + model; 
const imgUrl = 'https://upload.wikimedia.org/...'

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

ReactDOM.render(
    <>
        <h1>나만의 {item} 주문하기</h1>, 
        <img src={imgUrl} alt="제품사진"></img>
        <button onClick={handleclick}>확인</button>
    </>,
    document.getElementById('root') 
);
======================================================================
#  JSX문법 

1. 속성명은 카멜 케이스로 작성하기!
onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex

예를 들어

ReactDOM.render(
    <button onClick>클릭!... </button>, 
    document.getElementById('root')
);


단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스(Camel Case)가 아니라 기존의 HTML 문법 그대로 작성하셔야 합니다.
ReactDOM.render(
    <div>
        상태 변경: 
        <button className='btn' data-status='대기중'>대기중</button>
        <button className='btn' data-status='진행중'>진행중</button>
        <button className='btn' data-status='완료'>완료</button> 
    </div>, 
    document.getElementById('root')
);

3. 반드시 하나의 요소로 감싸기 - Fragment



import ReactDOM from 'react-dom';



ReactDOM.render(
    <>
        <p>안녕</p>
        <p>리액트</p>     
    </>, 
    document.getElementById('root')
); 



2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다!
JSX 문법도 결국은 자바스크립트 문법이기 때문에,  for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다

ex) 


그래서 HTML의 for의 경우에는 자바스크립트의 반복문 키워드 for와 겹치기 때문에 htmlFor로, HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성

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





4. 자바스크립트 표현식 넣기