오래 못 할 짓 하지 않기

이제 객체지향 느낌이 남 각 기능별로 쪼개서 그 Property들을 갖다 쓴다. 예를 들어 하나의 함수에 button을 만들어 여러 스타일을 입혀줬다. 또 다른 버튼을 만드는 함수를 만들어서 비슷한 스타일을 넣으려면 하나하나 다 복사해야한다. 만약에 text만 다른데 그렇게 여러 함수를 만들면 오히려 복잡해지므로, button만드는 함수를 만든 뒤에 각각 parameter에 쓸 text를 넣어서 그걸 띄우자. function Btn(props){ // props 말고 {banana}라고 쓰면 바로 그걸 가져옴 console.log(props); return( {props.banana} //그럼 여기에 {banana}만 해도 됨 ) } 이거를 이제 밑에서 각각 띄울 때는 function App() { re..

이전 정리에서 배운 것으로 하면, 우리가 count값을 바꿀 때마다 render를 새로 해주어야한다. 왜냐하면 변수의 값은 변했지만 그 변한 값을 화면에 띄워주진 않았으니 실제로 변한 것을 감지할 수가 없다.(콘솔 열지 않는 이상) 물론, 이벤트가 감지되면 실행되는 함수에 render를 넣으면 되긴하지만, 귀찮다. 따라서 여기에 쓸 수 있는 기능이 있다. const [a, setA] = React.useState(); 이 기능만 설명하면 어떻게 쓰는지는 쉽게 알 수 있을 것 같다. 먼저 React.useState()는 두 개의 값을 배열로 넘겨준다. [ a라는 데이터 ] + [ (setA) a 값을 변화시키기 위한 함수 ] 저 () 가운데에는 a의 초기값을 쓸 수 있다. ● 사용법 띄우고 싶은 A의 값을..

리액트는 HTML을 굳이 생성할 필요없이 [ JS 작성 → HTML이 생성됨 ] 이런 구조이다. 자바 스크립트에서 시작해서, HTML로 끝낸다. 방법 1 자바 스크립트로 HTML들을 생성할 수 있다. = 굳이 HTML 태그들을 하나하나 끄적이면서 만들 필요가 없다. 그러나 위에 id = root 인 div하나 만들어놨음 const root = document.getElementById("root"); const abc = React.createElement("span" ,{ id:"scrub", onMouseEnter: () => console.log("leave me alone") },"hello i'm span"); const btn = React.createElement("button",{ onCl..

Total clicks: 0 click here span = 줄바꿈이 되지 않는 div 이렇게 만들었을 떄 나오는 페이지는 이런 모양이고 버튼을 클릭해도 큰 차이는 없다. 그럼 body태그 뒤, html태그가 끝나는 그 사이에 태그를 추가해서 각각의 요소들에 대한 이벤트 설정을 해주자 // 변수 설정 let counter=0; const button = document.getElementById("btn"); const abc = document.querySelector("span"); // 감지 시에 실행할 함수 function handleClick(){ counter=counter+1; abc.innerText = 'Total clikcs : ' + counter; } // 이벤트 감지 button...