import { useState } from "react";import './TodoList.css'function TodoList() { const [todos, setTodos] = useState([]); //빈 배열로 설정 const [input, setInput] = useState(''); //addTodo 기능이 붙은 버튼을 누를 때 const addTodo = () => { setTodos([...todos, { text: input, completed: false }]); //setTodos로 기본으로 아무런 리스트가 없는 목록에 새로운 목록 하나씩 추가하는 것을 진행 setInput(''); }; //할 일을 완료하면 완료 처리를 해주는 ..

React Router : 링크를 연결해서 이동하기 위해 사용되는 라이브러리 기존 html에서 주소값을 이동할 때 사용한 방법 :     a href="html파일이름.html">이동하기     a 태그로 href를 이용할 경우 html 파일명을 작성해주는 것이기 때문에 React에서는 단순히 a 태그와 href만 사용할 수 없음     -> React는 html 파일이 index.html 한 파일 밖에 없기 때문.     -> 따라서 React는 Javascript로 이동해서 html 파일을 보여주므로 react-router-dom을 사용 * Router : 연결 경로를 자동으로 전환해서 연결해주는 기계     - 연결 경로를 자동으로 전환해서 주는 기준         : 고객(사용자)이 어떤 특정 화..

Game.js import React, { useState } from 'react';const Game = () => { //guess : 맞출 숫자 입력 const [guess, setGuess] = useState(''); //message : 맞는지 아닌지 전달하는 메시지 const [message, setMessage] = useState(''); //랜덤으로 1~10사이의 숫자 만들기 const [number, setNumber] = useState(Math.floor(Math.random() * 10) + 1); //숫자 맞추려고 시도한 횟수 const [attempts, setAttempts] = useState(0); //사용자가 숫자를 맞..

bootstrap을 이용한 npm install 사용하기 npm을 이용해서 실행, 설치, 설정을 변경할 수 있음 (** npm = nodeJs 설치나 실행 환경설정을 위한 약자) https://www.npmjs.com/npm으로 무언가를 설치할 때 : npm i 설치할파일명또는npm install 설치할 파일명 무언가를 삭제할 때 : npm uninstall 삭제할파일명 부트스트랩 설치, 삭제 : npm i bootstrap npm uninstall bootstrap **npm i bootstrap 뒤에 @버전을 작성하지 않으면 가장 최신 버전으로 설치 특정 버전 설치 : npm i bootstrap@5.2.1 **npm으로 인한 설치는 npm start로 시작하고 있는 패키지 실행 여부와 관계없이 설치..

Parent.jsimport React, {useState} from "react";//외부에서 만든 Context 객체를 import해서 가져와 사용import UserContext from "./UserContext";import Child from "./Child";//부모 컴포넌트const Parent = () => { //상태변수 userList, setUserList //userList 초기값 빈 배열 공간으로 설정 const [userList, setUserList] = useState([]); //userList : 빈 목록 //setUserList : 추가될 유저 리스트 return( ..

Context는 1개의 값만 제공할 수 있음 -> 2개 이상의 값을 제공하려면 {}, []로 묶어서 제공 ** number와 setNumber를 {number, setNumber}로 작성 시 다음과 같이 변환, 전달함     {"number" : number, "setNumber" : setNumber} ==>    {"number" : 0, "setNumber" : 변환될 값} import React, {createContext ,useContext, useState} from "react";const TestContext = createContext();//후손 컴포넌트const Sibling = () =>{ // TestContext에서 제공된 값을 여기서 사용 // const [nu..