반응형
리액트와 JSX의 관계
태그 내부에 변수를 넣는 법
<tag>..{value} ... </tag><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
const item = "SD카드"
const value = 12000
const msg = <h1> {item} - {value}원</h1>
const elm = document.getElementById("root")
ReactDOM.render(msg, elm)
</script>
</body>태그의 속성값에 변수를 넣는 법
<tag attr={value}...</tag>JSX 주의사항
function getDom(){
return
<div><p>안녕하세요</p></div>
} // 오류발생한다. 제대로 HTML태그 인식 못함 function getDom(){
return(
<div><p>안녕하세요</p></div>
)
} // 범위를 소괄호로 감싸서 명시적으로 지정해준다.
//** 연속적으로 작성못함 하나의 dom요소만 적어야한다.<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
ReactDOM.render(
getDOM(),
document.getElementById('root')
)
function getDOM(){
return (
<div>
<p>안녕하세요</p>
<p>저는 지은입니다</p>
</div>
)
}
</script>
</body>
JSX로 스타일 속성 지정
아래처럼 객체로 지정한다.
const obj = { prop1:value1, prop2:value2, prop3:value3...}
const dom = <tag style={obj}> ... </tag><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
ReactDOM.render(
getDOM(),
document.getElementById('root')
)
function getDOM(){
const css1 = {
"color": 'red',
"background-color": '#f0f0ff',
"font-size": '2em"'
}
const css2 = {
"color": 'blue',
"background-color": '#fff0f0',
"font-size": '2em"'
}
return(
<div>
<p style={css1}> 안녕하세요</p>
<p style={css2}> 안녕하세요</p>
</div>
)
}
</script>
</body>변수 값은 자동으로 이스케이프 처리
"<", ">" 는 < , > 로 자동으로 변환된다.
보안문제 (XSS)를 방지할 수 있다.
반응형
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
| 자동빌드, 웹팩 (0) | 2021.05.16 |
|---|---|
| 컴포넌트, 이벤트 (0) | 2021.05.15 |
| 가상 DOM (0) | 2021.05.14 |
| 리액트입문 (0) | 2021.04.26 |
| Node.js 환경설정 (0) | 2021.04.25 |
