분 ↔ 시간 변환 함수 minutes, hours의 입력값은 amount로 받는다 각각의 input에 입력할 수 있는 유무(disabled)는 inverted의 boolean값에 의해 결정되며 이 값은 onInvert함수를 가진 버튼을 클릭하면 스위치 된다

버튼 클릭 시, 카운팅되는 함수 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