728x90
강의를 통해 새로 알게 된 것들
CRA없이 html 파일 하나에다가 react, babel을 script로 세팅해서 React SPA 페이지를 만들어 보았습니다. 리액트를 처음 만났을 때 분명히 이런 방식을 접해봤었고, JSX가 아닌 이전 문법도 접해보았습니다. 하지만 그 당시엔 새로운 지식을 다량 접하다 보니 제대로 못 알아들었었습니다.
제로초 님 강의를 보면서 다시금 Babel이 JSX를 변환해준다는 것도 알게 되었고, index.html에다가 직접 React Component를 만드는 경험도 해보았습니다. 한번씩 "남이 만들어 둔 CRA 없이는 Page하나 못만드는 바보" 라는 생각을 하곤 했는데 마법의 뒷부분을 알게 되니 기분이 좋네요.
아주 간단한 구구단 만들기였지만, 기본을 다시 다지는 꽤 의미있는 강의였다고 생각합니다.
<html>
<head>
<meta charset="utf-8" />
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> -->
<!-- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
'use strict';
function Gugudan() {
const [result, setResult] = React.useState('');
const [input, setInput] = React.useState('');
const [number, setNumber] = React.useState({
first: ~~(Math.random() * 8 + 2),
second: ~~(Math.random() * 8 + 2),
});
const numberInput = React.useRef();
const onSubmitAnswer = e => {
const { first, second } = number;
e.preventDefault();
if (+input === first * second) {
setResult(`${first} * ${second} = ${input} : 정답입니다!`);
setNumber({
first: ~~(Math.random() * 8 + 2),
second: ~~(Math.random() * 8 + 2),
});
} else {
setResult('틀렸습니다 😅');
}
setInput('');
numberInput.current.focus();
};
return (
<>
<header>
<h1>구구단</h1>
</header>
<main>
<h3>
{number.first} 곱하기 {number.second} 은?
</h3>
<form onSubmit={onSubmitAnswer}>
<input type="number" value={input} onChange={e => setInput(e.target.value)} ref={numberInput} />
<input type="submit" value="submit" />
</form>
<h3>{result}</h3>
</main>
</>
);
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<Gugudan />);
</script>
</body>
</html>'FrontEnd > React.js' 카테고리의 다른 글
| [React.js] 제로초 웹게임 - 5. 가위바위보 (life Cycle, useEffect) (0) | 2022.10.25 |
|---|---|
| [React.js] 제로초 웹게임 - 4. 반응속도체크 (useRef) (0) | 2022.10.24 |
| [React.js] 제로초 웹게임 - 3. 숫자야구 (shouldComponentUpdate, React.memo) (0) | 2022.10.24 |
| [React.js] 제로초 웹게임 - 2. 끝말잇기 (Webpack, Babel) (0) | 2022.10.22 |
| [React.js] to-do-app, fetch => Axios 마이그레이션 과정 (0) | 2022.10.20 |
| [React.js] Github Page를 활용한 개인 프로젝트 배포 (2) | 2022.10.04 |
| [React.js] delete fetch 시 'Undexpected end of JSON input' 에러 (1) | 2022.10.03 |
| [React.js] Styled Components 파일 분리 멘토 코드 리뷰 (0) | 2022.09.04 |
댓글