와룡이네 와룡이네

이제 이전에 만드려고 했던 것을 만들어 보는 차례다. total clicks와 click 버튼을 만드는 것인데 문제는 counter는 올라가지만 화면에는 바뀌지 않았다 => render는 한 번만 이루어 지고있기 때문 => onClick이벤트로 counter가 바뀔 때 render를 다시 해줬으면 좋겠다 => render() 함수를 만들어 counter올라가는 함수에 넣어 주고 기존에 있던 render가 적혀있던 자리도 대체 리액트가 좋은 이유: vanila js로 만들었을 때는 숫자가 변하면 그 값이 담기는 span, div도 같이 변화했다 하지만 react는 render할 때 이전의 렌더된 데이터와 이 후 불러올 데이터의 차이를 보고 변하는 부분만 render 해준다고 한다! DOCTYPE html>..

- createElement를 대체하려는 것은 개발자들에게 좀 더 편리한 도구를 사용하기 위해서이다 - JSX는 JavaScript를 확장한 문법 - 브라우저는 JSX를 invalid하다고 생각해서 우리의 코드를 변환시켜줄 Babel이 필요하다 - 개발자 도구로 보면 우리가 바벨에게 넘겨준 코드가 스크립트에, 바벨이 바꾼 코드가 헤드에 담겨져 있다 DOCTYPE html> const root = document.getElementById("root"); const Title = ( console.log("mouse enter")}>"Hello, I'm a span" ); // const h3 = React.createElement( // "h3", // { // id: "title", // onMouse..

리액트로 더 쉬운 코드를 짜기 전에 이전에 만들어 두었던 코드를 복습하는 시간을 가졌다. 1. 리액트와 리액트 돔을 설치 리액트 돔은 리액트 elemet를 가져다 html로 바꾸는 역할 2. element 세개 작성 => div , property X, h3와 button 두개의 element를 render 3. { "tag","props","content" } => props 안에 event listener 등록이 가능 매우 파워풀 다음 시간에는 더 쉽게 이를 만든다 DOCTYPE html> const root = document.getElementById("root"); const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => ..

이전의 코드에 이벤트를 추가해보는 시간을 가졌다 확실히 그냥 JS보다 쉽고 간결해지는 것을 느꼈는데 다음 시간에는 이 코드들을 더 쉬운 방법으로 바꿔본다고 한다 기대하라고 했다 :) DOCTYPE html> const root = document.getElementById("root"); const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => console.log('mouse enter'), }, null, "Hello, I'm a span" ); const btn = React.createElement( "button", { onClick: () => console.log("im clicked"), style: { backgro..

Javascript와 html을 이용해서 만들었던 코드를 리액트를 이용해서 만들었다 DOCTYPE html> const root = document.getElementById("root"); const a = React.createElement("span",{id:"sexy-span",style: { color:"red",font-size: }}, "Hello, I'm a span"); ReactDOM.render(a,root); 물론 이런 방식으로 개발자들은 코드를 짜지 않으며 앞으로 이렇게 어렵게 짜지 않는다고했다. html를 최소화 하고 react와 dom을 사용했지만 상당히 많은 시간이 소요 되기도 하고 해야할 일이 많다 여기서 중요한 것은 기존 : html을 작성하고 javascript로 가져와..

본격적으로 리액트에 들어가기 전에 리액트를 사용 하지 않은 코드를 먼저 작성하고 리액트를 설치하는 시간을 가졌다 DOCTYPE html> Total clicks: 0 Click me let counter = 0; const button = document.getElementById("btn"); const span = document.querySelector("span"); function handleClick() { counter = counter +1; span.innerText = "Total clicks: "+counter; } button.addEventListener("click", handleClick); 버튼을 하나 만들어두고 누를 때마다 클릭 수가 올라가는 간단한 예제 리액트를 사용하지 ..