[react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) 리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보다는 Hooks를 리액트에서 권장하고 있는 방식입니다. · Class보다 Hooks가 코드가 훨씬 간결합니다. · 모든 state를 쪼개서 선언합니다. · this.state, this.setState을 사용 안합니다. · ref를 React.useRef으로 문법을 사용합니다. · render() 함수 부분은 같습니다. · Class에서는 state가 변경될 때마다 render함수 내에서만 재실행되지만, Hooks에서 함수 전체가 재실행되기 때문에 속도가 더 느릴 수 있습니다. state.. [js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) 리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. · input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다. · this.setState 사용방법: this.setState ({ 변경 후의 데이터 }) · html에서 class 속성 대신 className을 사용합니다. · html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다. · setState는 비동기입니다. 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 리액트 구구단 게임 구현 html.. [js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) 자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립트 2. vue.js 간단한 구현 내용으로 vue.js cdn을 설치하였습니다. 구구단 {{ num1 }} 곱하기 {{ num2 }} 는? //focus() 처리를 위하여 ref 사용 결과 {{result}} parseInt() String을 Number 타입으로 바꾸는 함수 입니다. 타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다. parseIng() 예제 parseInt("10"); // 10 parseInt("-10") // -10 parseInt("10.5").. 이전 1 다음 반응형
