-
JSXJavaScript/React 2022. 12. 15. 00:26
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. 자바스크립트 표현식 넣기'JavaScript > React' 카테고리의 다른 글
State (1) 2022.12.23 이벤트(Event) (0) 2022.12.17 프라퍼티(Props) (0) 2022.12.17 컴포넌트(component) (0) 2022.12.16 리액트시작하기 (0) 2022.12.14