// 1) Import the React and ReactDOM librariesimport React from 'react';import ReactDOM from 'react-dom/client';// 2) Get a reference to the div with ID rootconst el = document.getElementById('root');// 3) Tell React to take control of that elementconst root = ReactDOM.createRoot(el);// 4) Create a componentfunction App() { return ;}// 5) Show the component on the screenroot.render(); 위 기본적인 틀이다..

1. 값을 바꾸면 자동 재 렌더링function Counter() { // let count = 0; // 여기 변수는 마음대로 작성이 가능하다. 하지만 그 기능에 맞게 작성하는 것이 좋다. const [count, setCount] = Index.useState(10); // const로 바꿔야 하고, 값만 바꾸는 것이 아닌 메서드 통해 변경을 해야한다. const handleDown = () => { setCount(count - 1); }; const handleUp = () => { setCount(count + 1); }; const handleReset = event => { ..

현재 실습은 Counter 라고, +를 누르면 +1가 되고, -를 -1이 되며 0을 누르면 0으로 초기화 되는 간단한 실습이다.1. HTML + JS이는 HTML 과 JS를 통해 구현한 방법이다. 아마 내가 자바스크립트를 어떤 것을 만든다면 이렇게 구성을 했을 것이다. Counter - HTML + JS 파일 경로: - 0 + 0  이렇게 body 부분은 이러한 형식으로 구현을 했을 것이다. 각 버튼에 이벤트를 걸고, 그것에 맞춰서 함수를 만들어 구현 했다.아래는 자바스크립트 부분이다. 중간에 filepath의 경우는 파일 경로를 동적으로 출력해주는 것이다. 이제 화면 갱신하는 부븐에서는 id가 counter인 요소..