함수로 만들어보기 rfce는 export default가 아래에 작성됨 index.js에서도 컴포넌트 바꿔준다. import React, { useState } from "react"; function GuguFunction() { //useState const [first, setFirst] = useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = useState(Math.ceil(Math.random() * 9)); const [value, setValue] = useState(""); const [result, setResult] = useState(""); const [score, setScore] = useState(0); co..

import React, { useState } from 'react'; const GugudanGame = () => { const [question, setQuestion] = useState({}); // 현재 문제를 담는 상태 const [userAnswer, setUserAnswer] = useState(''); // 사용자가 입력한 답을 담는 상태 const [message, setMessage] = useState(''); // 정답 여부 메시지를 담는 상태 // 랜덤한 구구단 문제 생성 함수 const generateQuestion = () => { const num1 = Math.floor(Math.random() * 9) + 1; // 1부터 9까지의 숫자 중 하나 랜덤 선택 const..

vscode로 열기 local 서버로 실행 사용하던 first-app 폴더를 그대로 사용함 컴포넌트는 앞에 대문자를 사용하는게 원칙임 jsx 파일은 리액트 프로젝트에서만 사용하는 파일임 js로 만들어도 무관함. jsx도 자바스크립트에 포함되기 때문에 js로도 사용 가능하지만 리액트 컴포넌트임을 알기 쉽게 하기 위해서 jsx로 함 단축 기능이 있음 rfc를 치면 자동으로 아래와 같이 파일의 이름으로(Gugudan) 함수를 만들어줌 export -> index에서 구구단 컴포넌트를 불러오는데 export가 붙어있어야 되어야 불러올 수 있음 index.js에서 기존 불러오던 App컴포넌트를 지우고 Gugudan을 불러왔다. 출력화면이 Gugudan으로 바뀐것을 확인 할 수 있다. export와 default가..

function AddPetForm() { function handleSubmit(e) { e.preventDefault(); alert("펫 추가 클릭함!"); } return ( 새 PET을 추가하기 펫 추가 ); } form 태그에 onSubmit 실행 시 handleSubmit 함수를 실행하도록 하고 handleSubmit 함수를 만들어준다. 이 함수는 submit 실행 시 input창에 입력된 내용들을 초기화하면서 서버로 보내는 이벤트를 중지하고, alert창을 띄우는 함수이다. 위와 같이 펫 새로 추가할 동물 내용을 추가하고, 펫 추가를 클릭하면 input창 내용이 사라지지 않고 alert창을 띄운다. 기존에 있던 펫 배열을 useState로 만든다. 팻 배열이 추가되거나 변동이 있으면 리랜더..

function LikeArea() { const likeCount = 0; return ( 추천하기 비추하기 이 페이지를 {likeCount} 번 추천 했습니다. ); } function LikeArea() { const [likeCount, setLikeCount] = useState(0); const plusLike = () => setLikeCount((prev) => prev + 1); const minusLike = () => setLikeCount((prev) => prev - 1); return ( 추천하기 비추하기 이 페이지를 {likeCount} 번 추천 했습니다. ); } 추천하기 클릭하면 비추하기 클릭하면 줄어든다 likeCount 값은 prev와 같다 그리고 클릭 이벤트가 일어날 ..

https://ko.legacy.reactjs.org/docs/hooks-overview.html Hook 개요 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org state 란? state는 변경되면 자동으로 재랜더링 된다. 현재는 의 사용으로 1초마다 계속 업데이트 시켜주고 있음 state를 사용하면 해당 작업을 안해도됨 App.js time -> 현재시간 setTime function TimeArea() { const [time, setTime] = useState(new Date().toLocaleString()); setTimeout(function () { setTime(new Date().toLocal..

function App() { //자바스크립트는 여기에 작성함 const pets = [ { name: "줄리아", species: "cat", age: "5", id: 123456789 }, { name: "라이언", species: "dog", age: "3", id: 987654321 }, { name: "플로피", species: "rabbit", age: "2", id: 123123123 }, { name: "길동", species: "cat", age: "1", id: 456456456 }, { name: "진도", species: "dog", age: "6", id: 789789789 }, ]; return ( {pets.map(function (pet) { return ; })} ); } ..

App.js import "./App.css"; function App() { return ( ); } function OurHeader() { return 처음 앱; } function TimeArea() { return 현재 시간 : {new Date().toLocaleString()}.; } function Footer() { return Copyright Footer Text; } export default App; 재 사용 가능한 컴포넌트로 됨. index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(docume..

https://nodejs.org/en/download Download | Node.js LTS Recommended For Most Users nodejs.org 다 next해서 설치하면됨 설치 됐는지 확인하기 npm은 node.js를 설치하면 패키지로 생성되는 프로그램임 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ef8a840bd on 10/25/2023. chrome.google.com 에러..

https://ko.legacy.reactjs.org/docs/hello-world.html Hello World – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 자바스크립트 라이브러리인 리액트 리액트 홈페이지의 문서 소개를 따라서 코드펜에서 실습해봄 https://codepen.io/pen/ Create a New Pen ... codepen.io Babel react, react dom 선택 자바스크립트로 가상의 dom를 만들어서 헬로우 월드! 를 랜더링 한다. https://codepen.io/hrrhhaff-the-bold/pen/abXLyZL 카멜 케이스로 적용이 됨 ( 두 번째 단어의 첫 글자는 대문..