정석방법
const root = document.getElementById("root");
const h3 = React.createElement(
"h3", // 만들 요소명
{ // 속성들(props)
onMouseEnter: () => console.log("mouse enter")
},
"Hello I'm a span" // 들어갈 내용
);
const btn = React.createElement("button", {
onClick: () => console.log("i\'m clicked"),
style : {
backgroundColor : "tomato"
}
}, "Click me");
const container = React.createElement("div", null, [h3, btn])
ReactDOM.render(container, root);
각 react 요소를 createElement해서 요소, 프롭, 컨텐츠를 넣어 미리 생성시킨 뒤 렌더링함
실무방법
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- 바벨 : JavaScript를 확장한 문법으로 JSX라고 부르는 녀석을 React문법으로 변환시켜준다 -->
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Container = (
<div>
<Title />
</div>
)
ReactDOM.render(Container, root);
react 요소를 함수화해 html 요소를 그대로 때려박고 함수를 호출하는 방식으로 사용함 (재사용하기 편함)
① 이벤트를 프롭에 지정할 때 앞에 on을 붙여줘야 리액트가 이벤트로 인식함
② 만든 컴포넌트는 무조건 대문자로 시작해야함(소문자인경우 html태그로 인식함)
'dev' 카테고리의 다른 글
[php] 대용량파일 첨부시 $_POST 데이터 없어질 때 (0) | 2023.06.30 |
---|---|
[pgadmin 4] 쿼리 실행해도 data output가 나오지 않을 때 (0) | 2023.06.27 |
[dbeaver] 여러 컬럼데이터 복사 (Advanced Paste) (0) | 2023.05.24 |
[dbeaver] 23.0.5 자동완성 안되는 문제 (0) | 2023.05.24 |
[php] if문에서 int 0값이 들어갈 경우 (0) | 2023.03.23 |