버튼 클릭 시, 카운팅되는 함수 vanilla JS Total click: 0 Click me react_1(bad) render 함수로 클릭이 될 때 마다 업데이트된 counter을 리랜더링 함 react_1(good) React.useState()는 [0, f] 즉, 초기값 0과 초기값을 변경할 수 있는 함수를 가진 배열을 반환한다 각각의 배열값을 const [aaa, setAaa] = React.useState(); 로 각각 선언해 리렌더링 하고자 하는 값에 사용할 수 있다. 위 함수의 경우 버튼을 클릭하면 1씩 증가하해야 하므로 초기값으로 0을 부여함 -> (React.useState(0);)

React js hard cording_2 React.Element로 HTML태그, 속성, event, 내용 등을 컨트롤 할 수 있음 html에 자식 태그를 삽입할 시, 배열 " [] "에 넣으면 생성할 수 있다 React j _ JSX(babel) // JSX를 읽을 수 있게 해주는 cdn JSX는 HTML구조와 비슷하게 사용이 가능하며 babel을 통해 컴퓨터가 JS로 읽을 수 있게 하면 된다. 위와 결과물은 동일하게 출력된다. React j _ JSX(babel)_2 각각의 컴포넌트(Title, Button)를 함수의 형태로 만들고 컴포넌트를 합치는 컨테이너 또한 함수의 형태로 만든다. 단, 모든 컴포넌트의 첫 글자는 대문자이여야 한다. 소문자로 작성할 시 리액트와 JSX는 HTML태그로 인식한다...

React js hard cording React로 span 태그를 생성한 후, HTML의 #root에 ReactDOM.render로 span을 그려주는 코딩 결과

클릭이벤트_클릭 counter Vanilla JS Total click: 0 Click me →Click me 버튼을 클릭하면 클릭한 횟수가 카운팅 됨. React import (cdn 방식) // React cdn // React-dom cdn react cdn 링크 https://ko.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaScript library for building user interfaces ko.reactjs.org

node.js 설치 https://nodejs.org/ko/ 왼쪽의 안정적인 버전의 node js 설치 다른 설정 필요없이 설치하면 됨 node js를 설치하면 자연적으로 npm도 같이 설치된다 npm 사용 jQuery, swiper, bxslider 등 외부 라이브러리를 cdn으로 가져올 필요 없이 npm을 사용하여 설치 가능 1. win + r 눌러 실행창 오픈 2. cmd 열기 3. node js가 잘 설치 되었는지 확인 (node -v) 명령어 입력 4. 원하는 위치에 연습폴더 만들기 - 원하는 폴더의 위치로 가는 방법 : cd 하위폴더명 - 폴더 만드는 명령어 : mkdir 폴더명 5. 예시로 jQuery를 연습폴더에 설치 npm install jquery --save yarn 설치&사용 npm..

HTML CSS nav{position:fixed; right:200px; bottom:150px; z-index:100;} nav .plus{display:none;} nav .toggle {position:absolute; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.7); cursor:pointer; z-index:10;} nav .toggle span {top:calc(50% - 1px); left:calc(50% - 11px); z-index:10;} nav .toggle span:before {content:""; transform:translateY(-7px);} nav .toggle span:after {..