JSX 문법
-
최상위 요소는 하나여야 한다
-
최상위 요소를 return 하는 경우, () 로 감싸주어야 한다.
-
자식들을 바로 랜더링하고 싶으면 <>자식들 </>를 사용해야 한다.
ex) React.Fragment -
if 문은 사용할 수 없다.
-> 삼항 연산자 , && 사용 가능 -
style을 이용해 인라인 스타일링이 가능하다.
-
class 대신 className 사용한다.
-
요소는 꼭 닫아야 한다. <> </> 닫기 필수!
-
표현식은 무조건 {}를 사용한다.
ReactDOM.render( //최상위 요소는 꼭 넣기 <> <div props="props 전달값" className="class대신"> <h1>{표현식}</h1> <ul> <li>React</li> <li>Vue</li> </ul> </div> <div> <h1>sub</h1> <ul> <li>안녕</li> <li>hi</li> </ul> </div> </> , document.querySelector('#root') )
예시 ) props 를 인자로 전달해서 유동적으로 출력
//코드예시
<body>
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//hook function 사용시
function Component(props) {
return (
<div>
<h1>{props.message} massage 데이터 입니다. </h1>
</div>
);
}
ReactDOM.render(
<Component message="안녕하세요!" />,
document.querySelector("#root")
)
</script>
</body>
<body>
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//class 사용시
class Component extends React.Component {
render() {
return (
<div>
<h1>
{this.props.message} massage 데이터 입니다.
</h1>
</div>
)
}
}
ReactDOM.render(
<Component message="안녕하세요!" />,
document.querySelector("#root")
)
</script>
</body>동일html 출력)
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍