CodeIt_Sprint/React_초급19 (10)React_초급_ useState() 실습문제 ◎ 연습문제1 :이번엔 배점 기능을 한번 구현해 보겠습니다.원하는 숫자로 배점을 정하면, 게임이 진행될 때마다 이긴 쪽이 해당하는 점수를 얻는 기능이예요.input 태그로 배점을 정하고 이것에 따라 점수에 반영하려고 합니다.여기서 리액트에서 특별한 prop을 하나 사용해 보도록 하겠습니다.onChange바로 input 태그의 onChange라는 prop입니다.이전에 자바스크립트로 input을 다루는 방법을 공부하셨다면, 입력값이 변경될 때마다 이벤트를 받으려면 oninput 이벤트 핸들러 함수로 처리한다는 걸 배웠을 겁니다.하지만 리액트에서는 onChange 라는 prop을 사용해서 처리합니다. 동작은 oninput 이벤트 핸들러이지만 onChange으로 사용하는 건데요.의미상으로도 좀 더 직관적이죠? .. 2024. 11. 23. (9)React_초급_JSX 문법6 : useState(기본자료형) vs useState(참조자료형) ● Defalut 상황○ Dicegame 프로젝트에서, useState()메소드를 이용하여, 돌렸을 때마다, " 총점 , 기록 " 을 하는 항목 추가해보기 - App.js :import { useState } from 'react';import Button from './Button';import Dice from './Dice';function random(n) { return Math.ceil(Math.random() * n);}function App() { const [num, setNum] = useState(1); const handleRollClick = () => { const nextNum = random(6); setNum(nextNum); }; const handle.. 2024. 11. 23. (9)React_초급_JSX 문법6 : props객체의 Children 프로퍼티, useState 사용하기 ● Defalut 상황○ App.js + index.js//App.jsimport Dice from './Dice';function App() { return ( )}export default App;//index.jsimport ReactDOM from 'react-dom/client';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );■ 주사위 위에 "던지기" , "처음부터" 라는 버튼을 Button 컴포넌트 태그로 만들어 보기● 개념1_ props객체의 children 프로퍼티 이용해서 Button 컴포넌트 만들기=> sr.. 2024. 11. 23. (8)React_초급_JSX 문법5 : 컴포넌트 속성지 ● Defalut 상황○ Dice 컴포넌트 (Dice.js)import diceBlue01 from './assets/dice-blue-1.svg'; //Blue 주사위 1 사진 링크function Dice(props){ return ; //Blue 주사위 1 사진의 src 속성에 대입 값, 반환}export default Dice;//외부 Dice 컴포넌트 사용 가능 코드○ App 컴포넌트 (App.js)import Dice from './Dice';//App 컴포넌트에서 리엑트 컴포넌트 태그 를 사용할 수 있도록 importfunction App(){ return ( //Dice컴포넌트 + color 속성값 지정 + 반환 )}export default App;//외부에.. 2024. 11. 22. 이전 1 2 3 4 5 다음
