onSubmit
-
[React 기초] React 간단 예제 - 구구단 게임 : React Hooks컴퓨터 알아가기/React 2023. 12. 25. 19:30
구구단 게임은 임의의 랜덤한 두개의 숫자가 화면에 보이면 답을 입력하여 정답 또는 오답을 나타내는 간단한 웹게임입니다. 지난 시간 자바스크립트로 구성을 복습 하였기에 이제 본 목적인 React로 만들어 보도록 합니다. 본 내역은 제로초 TV의 리액트 강좌를 기본으로 하고 있숩니다. ▒ React Hooks 구구단 게임 처음으로 React Hooks라는 말을 사용하는데 사실 함수Component로 되어 있는 React를 React Hooks라고 칭합니다. 1. React Hooks의 기본 구조 이전 시간 Class Component와 함수 Component의 기본구조를 보았습니다. 거기서 차용을 해오면 아래와 같은 기본틀을 기억해야 합니다. 2. React 특성 우리가 만들고자 하는 결과물은 지난시간 자바..
-
React 기본 : 끝말잇기 프로그램 만들기 (WordRelay.jsx 파일 만들기)컴퓨터 알아가기/React 2021. 7. 27. 19:30
본 내용은 ZeroCho TV의 무료 웹강좌를 기본으로 정리하고 있는 React 내용입니다. Webpack의 Build도 성공하였으니 다양한 프로그램을 따라 공부하면서 나만의 실력을 키울 첫번째 과정입니다. 여러가지 Package중에서 중요한 역할을 담당하고 있는 webpack.config.js 파일에서 약간 더 보충이 되어야 할 내용이 있어 첨가합니다. ▒ webpack.config.js 파일의 구성요소 지난시간까지는 입력 entry >> module >> output 의 순서로 기억 했습니다. 여기서 좀 더 추가할 부분은 프로그램에 필요한 플러그인이 필요한데 그러기 위해서는 entry >> module >> plugins >> output으로 기억해 놓는게 기본이라고 합니다. 아울러 module에서 ..
-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다. React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다. React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다. 기본적인 태그를 나타내 보겠습니다. ① 구구단 클래스 Component를 정의하고 ② 이 내용을 화면에 그리겠다 라는 기본 틀은 다음과 같습니다. ③ this.state를 통해 바뀌는 부분을 정의..