봉보로봉봉

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Route가 너무 많아져서 관리가 힘들 때 params(파라미터)를 사용해서 줄일 수 있음 > 동적 라우트 매칭 하나하나 바꾸기 힘들고 언제 바뀔지 모르는 것에 사용 추천 예: 주소/category/HTML 주소/category/CSS 주소/category/JavaScript // :name이 파라미터 import React from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom'; import GameMatcher from './GameMatcher'; const Games = () => { return ( 숫자야구 가위바위보 로또추첨기 게임매쳐 ) } export default Games; 이렇게 쓸 수 있음 // Game..

이렇게 만 썼더니 오류남 const Games = () => { return ( 숫자야구 가위바위보 로또추첨기 ) } A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 는 의 자식 요소로만 사용 될 수 있고, 절대 직접적으로 렌더될 수 없다. 를 로 감싸라. return ( 숫자야구 가위바위보 로또추첨기 ) } 를 로 감싸니 해결! 이것도 react-router-dom 버전과 연관이 있는 것 같음 6에서만 해당되는 듯

리액트 라우터를 사용해서 컴포넌트를 불러오는데 이렇게 쓰니까 오류가 남 -------------------------------------------------------------- Matched leaf route at location "/rock-scissors-paper" does not have an element. Matched leaf route at location "/rock-scissors-paper" does not have an element. 해당 위치에 일치하는 엘리먼트가 없다 component를 element로 고쳐서 입력하면 잘 작동함 react-router-dom버전이 6인지 5인지 확인해볼것! 6이면 component가 사용이 안되서 위 방법대로 element를 써야하는 ..

라우터를 사용하려면 설치부터 해야함! 두 개 모두 설치해야 웹에서 같이 쓸 수 있음 npm i react-router npm i react-router-dom import { BrowserRouter, HashRouter } from 'react-router-dom'; 이 둘을 자주 사용 import React from 'react'; import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'; import NumberBaseball from './NumberBaseball'; import RSP from './RSP'; import Lotto from './Lotto'; const Games = () => { return ( 숫자야구 가..

createContext import React, {useReducer, createContext} from 'react'; import Table from './Table'; import Form from './Form'; export const TableContext = createContext({ // createContext 함수 실행, 다른 파일에서 사용가능하도록 export, 초기값이 중요하지 않으므로 형식만 맞춰 넣음 tableData: [], dispatch = () => {}, }); const initialState = { tableData: [], timer: 0, result: '', } const reducer = (state, action) => { switch (action.t..

컴포넌트 단위로 나눌 수 있는 만큼 나눠야 나중에 성능최적화 하기 편리 useReducer state의 갯수를 줄임, state 통일 state가 비동기적으로 바뀜 ... const initialState = { winner: '', turn: 'O', tabalData: [['','',''], ['','',''], ['','','']], } const reducer = (state, action) => { // reducer = 함수 state와 action을 인자로 받음 switch (action.type) { // action을 받아와서 실행 case 'SET_WINNER' : return { ...state, // state를 직접 바꾸면 안됨 state.winner = action.winner;..