봉보로봉봉

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..

라우터를 사용하려면 설치부터 해야함! 두 개 모두 설치해야 웹에서 같이 쓸 수 있음 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;..

// class // Lotto.jsx import React, { Component } from 'react'; import Ball from './Ball'; function getWinNumbers() { console.log('getWinNumbers'); const candidate = Array(45).fill().map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]); } const bonusNumber = shuffle[shuffle.length - 1]; const w..

// class import React, { Component } from 'react'; const rspCoords = { 바위: '0', 가위: '-142px', 보: '-284px', } const scores = { 바위: 0, 가위: 1, 보: -1, } const computerChoice = (imgCoord) => { return Object.entries(rspCoords).find(function (v) { return v[1] === imgCoord; })[0]; }; class RSP extends Component { state = { result: '', imgCoord: '0', score: 0, } interval; componentDidMount() { // 컴포넌트가 첫..

componentDidMount() { // 컴포넌트가 첫 렌더링 후, 여기에 비동기 요청을 많이 함 } componentDidUpdate() { // 리렌더링 후 } componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 함 } componentDidMount 렌더가 처음 성공적으로 실행되었다면 실행됨 > 리렌더링이 일어날 때는 실행되지 않음 componentWillUnmount 컴포넌트가 제거되기 직전 실행됨 componentDidMount에서 했던 작업을 제거하는 용도 부모 컴포넌트가 자식 컴포넌트(본인)를 없앴을 때 setInterval같은 함수를 없애주지 않으면 계속 돌아가기 때문에 없앨 때 *보통 둘이 짝임 componentDidUpdate 리렌더..

구조분해 문법으로 적어줘야 깔끔해짐 render의 return안에서는 for과 if를 쓸 수 없음 JSX에서는 쓸 수 없음! 그래서 리액트 조건문은 삼항연산자로 많이 씀! renderAverage = () => { const { result } = this.state; return result.length === 0 ? null : 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms // 한번도 시도를 안했으면 태그가 없고: // 시도를 한 순간부터 평균시간을 보여줌 }; JSX에서는 null, undefined은 태그가 없는 것으로 인식됨 // 삼항연산자 사용 const renderAverage = () => { return result.length ..