JSX란?
- 자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법
- 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면, Babel이 JSX문법을 JavaScript로 변환 해준다
JSX 규칙
태그는 닫혀 있어야한다
function App() {
return (
<div>
<hello/>
</div>
);
}
export default App;
자바스크립트 값 및 표현식은 {}로 감싼다.
function App() {
const name = "RYU"
return (
<div>
<hello/>
</div>
<div>{name}</div>
);
}
export default App;
inline stle CSS는 객체형태로 작성
function App() {
const name = "RYU"
const style ={
backgroundColor : 'red',
fontSize : '2rem',
padding : 10
return (
<div>
<hello/>
</div>
<div style={style}>{name}</div>
);
}
export default App;
class설정은 className으로 작성
function App() {
const name = "RYU"
const style ={
backgroundColor : 'red',
fontSize : '2rem',
padding : 10
return (
<div className='hello'>
<hello/>
</div>
<div style={style}>{name}</div>
);
}
export default App;
null, false, undefined를 렌더링하는 경우
- 컴포넌트에서 사용하면 웹페이지에 아무것도 나타나지 않는다.
이벤트를 등록할때 onclick={함수명}으로 작성
function Likeup() {
const [Like,setLike] = useState(0)
const clicktoLickUp = () => {
setLike(like+1)
}
return (
<div>
<h1>{Like}</h1>
<button onClick={clicktoLickUp}>Like</button>
</div>
);
}
export default Likeup;