기본 구조
// html <body> <div id="root"></div> <button id ='btn_plus'>+</button> </body> <style> * { margin :0; padding :0; border: 0; } #root p { color : white; font-size: 20px; background-color: green; text-align: center; width: 200px; } #btn_plus { background-color: red; width: 200px; border: solid 2px #000000; font-size: 15px; } </style>
==> 결과 
고전적 프론트엔드 방식으로 Dom조작
const root = document.querySelector('#root'); const btn_plus = document.querySelector('#btn_plus') let i = 0 root.innerHTML = `<p>init : ${i} </p>` btn_plus.addEventListener('click' , () => { root.innerHTML = `<p>init : ${++i} </p>` })
React를 사용하지 않고 컴포넌트화 하여 Dom 조작
const component = { message: 'init', count : 0, render () { return `<p> ${this.message} : ${this.count}</p>` } } function render(rootElement, component ) { rootElement.innerHTML = component.render() } // 초기화 render(document.querySelector('#root'), component) // 버튼 클릭시 document.querySelector('#btn_plus').addEventListener('click', ()=> { component.message = 'update' component.count++ render(document.querySelector('#root'), component) }) // 값이 바뀔 때마다 다시 랜더를 해야한다 => React를 통해 간편화가능
React로 Component를 만들어 Dom 조작
const Component = props => { return React.createElement('p', null , `${props.message} : ${props.count}`) } // 초기화 ReactDOM.createRoot(document.querySelector('#root')) .render(React.createElement(Component, {message: 'init', count:0}, null), ) // 갱신 document.querySelector('#btn_plus').addEventListener('click', () => { ReactDOM.createRoot(document.querySelector('#root')) .render(React.createElement(Component, {message: 'update', count: 10}, null), ) })클래스를 사용한 컴포넌트 생성
// 정의 class ClassComponent extends React.Component { render () { return <div>hello</div> } } // 사용 ReactDOM.createRoot(document.querySelector('#root')).render(<ClassComponent />)함수를 사용한 컴포넌트 생성
// 정의1 function FunctionComponent () { return <div>Hello</div> } // 정의2 const FunctionComponent = () => <div>Hello</div> // 사용 ReactDOM.createRoot(document.querySelector('#root')).render(<FunctionComponent />)=> 결과
