//기존 방식
const component = {
message : "init",
count : 0,
render(){
return `<p>${this.message} : ${this.count}</p>`
},
};
//rootElement = dom
function render(rootElement, component){
rootElement.innerHTML = component.render();
}
//초기화
//값이 바뀔때마다 앞뒤로 render해줘야함
render(document.querySelector("#root"),component);
document.querySelector("#btn-plus").addEventListener("click",function(){
component.message = "update";
component.count = component.count +1 ;
render(document.querySelector("#root"),component);
});
//개념의 이해
<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>
// console.log(React);
// console.log(ReactDOM);
//ReactDOM.render(리액트컴퍼넌트, 리액트 그려질곳)
//reactElement는 실제 element가 아니라 react규정상
//만들어진 element임으로 여기서 react라이브러리가 사용된다
//React.cerateElement(component,객체값,내용물)
const Component = props =>{
return React.createElement(
'p',
null,
`${props.message}:${props.count}`
);
}
ReactDOM.render(
React.createElement(Component,{message:"init",count:0},null),
document.querySelector("#root")
);
document.querySelector("#btn-plus").addEventListener("click",()=>{
ReactDOM.render(
React.createElement(Component,{message:"update",count:10},null),
document.querySelector("#root")
);
});
'프론트엔드 공부 > react' 카테고리의 다른 글
객체형state,constructor형 state/setState 두가지방법 (0) | 2021.05.29 |
---|---|
함수와 class를 이용한 component 만들기, default 값 설정하기 (0) | 2021.05.29 |
React JSX 문법 (0) | 2021.05.28 |
ReactDOM.render / React.createElement(type,[props],[...children]) (0) | 2021.05.28 |
react 개념 (0) | 2021.05.28 |