코딩하는 김딸기

state: data를 저장하는 곳-counter변수를 증가시키고 ui에 전시하는 함수를 state로 만들 수 있다 리액트의 좋은점은 UI에서 바뀐 부분만 업데이트 해줌변수를 JSX에 전달하는 방법let counter = 0; 변수를 만들고Total clicks: {counter} 로 만들어주면변수의 카운터 숫자에 따라 변화됨onClick={countUp}-> 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줌ReactDOM.render()로 container 처음 랜더링 할 때 카운터가 0이므로 0으로 호출됨그리고 container를 리렌더링을 해줘야 카운터가 +1 상태로 업데이트 됨.즉, countUp을 호출할 때마다 ReactDOM.render()을 다시 호출해야함-> co..

body>    button id="btn">click mebutton>  body>  script>    const button = document.getElementById("btn"); //id가 "btn"인 button 요소 생성    function handleClick() {      //함수생성      console.log("you clicked me");    }    button.addEventListener("click", handleClick); // button 요소에 클릭 이벤트 리스너를 추가->사용자가 버튼을 클릭할 때마다 handleClick 함수가 호출  script> addEventListener 메서드를 사용하여 button 요소에 클릭 이벤트 리스너를 추가->사용자가 ..

리액트 요소를 생성하는 createElement문법을 대체하기=>JSX   JSX – 자바스크립트를 확장한 문법보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨const Title = (console.log("mouse enter")}>Hello I'm a span);style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함 사전작업 ..

body>    div id="root">div>  body>  script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js">script>  script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js">script>  -react js는 element를 생성하고 이벤트 리스너를 더하는 것을 도와줌->interactive 파워를 가짐 -react dom 을 사용하는 이유 : react element 들을 html 요소로 바꾸기 위해비어있는 div는 reactDom이 react element를 가져다 놓을 장소 -id가 root인 div를 가져온 후 react..

리액트란?페이스북에서 만든 웹 UI를 작성하기 위한 자바스크립트 라이브러리React의 특징SPA의 단점을 보완하는 몇가지 기술을 도입SPA의 단점모든 기능을 한 페이지에서 다 구현하다 보니 상태(데이터) 관리가 어려움자바스크립트에서 HTML 코드를 생성해야 하므로 개발 생산성 저하브라우저의 DOM을 자주 갱신하다보면 성능 저하 발생 (처음부터 렌더링하는걸 반복하면 성능저하)SPA의 단점을 보완하는 React의 특징컴포넌트 별로 상태 관리가 가능하고 전역 수준의 상태 관리를 지원하는 서드파티 라이브러리가 많음JSX를 이용해서 HTML 생산성이 높음가상 DOM을 이용해서 성능 저하 최소컴포넌트 기반 개발화면의 일부 UI를 만드는 컴포넌트 단위로 개발컴포넌트는 자바스크립트로 개발하며 재사용성이 뛰어남상태 관리..