-jsx?
자바스크립트 문법을 확장한 것. 자바스크립트 + xml or html 된 것.
ex) const element = <h1>Hello, world!</h1>;
<자바스크립트> <HTML>
react 에서는 이러한 역할을 React.createElement 를 이용해 jsx 코드를 자바스크립트로 변환한다.
ex)
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementbyId('root')
);jsx 를 사용한 코드 (3번째, 8번째 줄)
class Hello extends React.Component {
render() {
return React.createElement('div',null,'Hello ${this.props.toWhat}');
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat : 'World' }, null),
document.getElementbyId('root')
);jsx를 사용하지 않은 코드(3번째 줄,8번째 줄)
/*jsx 사용*/
const element = (
<h1 className="greeting">
hello, world!
</h1>
)
/*jsx 미사용*/
const element = React.createElement(
'h1',
{className : 'greeting'},
'Hello, world!'
)
/*createElement 사용 결과 나오는 객체*/
const element = {
type : 'h1',
props: {
className : 'greeting',
children : 'hello, world!'
}
}
-createElement 구조
React.createElement(
type, << div, h1, span 같은 태그 / 리액트 컴포넌트
[props], << 속성(id, style 등)
[...children] << 자식 엘리먼트
)
-jsx 사용법
const name = '이름'; /*값 선언*/
const element = <h1>안녕, {name}</h1>;
/*<자바스크립트 코드>*/
ReactDOM.render(
element,
document.getElementById('root')
);자바스크립트로 선언한 name 의 저장된 값을 xml/html 코드 사용 중에 쓰고 싶다면 중괄호{}로 감싸면 적용이 된다.
함수 호출도 똑같이 중괄호{}안에 함수이름(참조값)을 넣으면 된다.
만약 속성에다가 값을 넣고 싶다면
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;큰 따음표"" 사이에 문자열을 넣거나 중괄호{} 사이에 코드를 넣으면 된다.
-jsx 장점
가독성이 좋고, 간결하다는 장점이 있고 중요한건 잠재적 보안 위협을 줄일 수 있다. createElement보다는 jsx로 쓰는게 좋다.
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;{title}로 들어가면서 문자열로 변환하기 때문에 {} 사이에 명시적으로 선언되지 않은 값이 들어갈 수 없다.
-실습
Book.jsx
import React from "react";
function Book(props){ //컴포넌트
return (
<div>
<h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
<h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
</div>
);
}
export default Book;
**주의할점 : 6번째, 7번째 줄의 `은 작은 따음표' '가 아니라 물결~키를 그냥 눌렀을때 나오는 거다(이걸 백틱이라고 부른다고 한다.)
Library.jsx
import React from "react";
import Book from "./Book";
function Library(props){
return(
<div>
<Book name="처음 만난 파이썬" numOfPage={300} />
<Book name="처음 만난 AWS" numOfPage={400} />
<Book name="처음 만난 React" numOfPage={500} />
</div>
);
}
export default Library;
실행하기 위해서는 index.js파일을 수정해야 한다(create react로 만들었다면 이미 만들어져 있으니 열어서 수정만 하면 된다.)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './chapter03_jsx/Library'; //컴포넌트 추가
const root = ReactDOM.createRoot(document.getElementById('root'));
/* 기존
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
*/
root.render(
<React.StrictMode>
<Library />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이후 npm start를 터미널에서 실행시켜 파일을 부른다.
'react 수업' 카테고리의 다른 글
| 6.state와 lifecycle (1) | 2024.09.03 |
|---|---|
| 5. components, props (0) | 2024.09.02 |
| 4. rendering elements (0) | 2024.08.31 |
| 2. react-react-app를 vs code에서 실행하기 (0) | 2024.08.29 |
| 1. 실제 리액트 연동하기 (0) | 2024.08.29 |