본문 바로가기

전체 글268

(11)React_초급_ 컴포넌트 재사용 하기(작성중) ● Defalut 상황 ● 1단계 : Defalut의 App.js 컴포넌트를 Board컴포넌트로 수정한뒤, Board컴포넌트 2개(나, 상대)가 들어있는 App.js 적용 후, index.js에 컴포넌트만 사용해서 작동시켜보기§ 해당 요구사항 출력 결과 :§ 과정 : ● 2단계 : "던지기" 버튼 , "처음부터" 버튼 하나로, 2개의 주사위를 동시에 적용되도록 하기§ 과정 :○ 순서1_ App 컴포넌트에 useState 메소드를 가져와야 => Board.Blue 컴포넌트, Board.Red 컴포넌트를 동시에 다룰 버튼 적용 가능 function App() { //나의 패 데이터 const [myNum,setMyNum] = useState(1); const [mySum,setMySum] = useS.. 2024. 11. 23.
(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.

티스토리툴바