개발노트

최적화 context API 의 Provider 에 value를 넣어줄때 useMemo useMemo를 안해주면 value가 바뀔때마다 Provider안에 있는 컴포넌트들이 다 리렌더링 되버림. const tblContextValue = useMemo( ()=>({ tableData, dispatch , gameOver }) ,[tableData]); 지뢰찾기 타이머:{timer} 결과:{result} Form, Table, Tr, Td 하위컴포넌트의 경우 React.memo 사용 jsx의 useMemo contextAPI를 쓰면 기본적으로 state가 바뀔때마다 useContext 를 쓴 함수컴포넌트가 한번리렌더링 된다 const Td = memo(({trIndex, tdIndex}) =>{ const..

칸 열었을때 지뢰 갯수 표시해주기 (1) 주변에 지뢰가 있는지 검사하기 위해 around 배열에 주변 칸(상태값)들 담아줌 ! let around = []; if(tableData[action.trIndex-1]){ around = around.concat( tableData[action.trIndex-1][action.tdIndex -1], tableData[action.trIndex-1][action.tdIndex ], tableData[action.trIndex-1][action.tdIndex +1], ) } around = around.concat( tableData[action.trIndex][action.tdIndex -1], tableData[action.trIndex][action.tdIn..

클릭했을때 TD를 계산해서 열어주는 액션 불변성을 유지하기 위해 딱 그 줄을 복사해서 그줄의 해당칸만 opened 로바꿔준다 Mine 컴포넌트에서 액션처리. const reducer = (state,action)=>{ switch (action.type){ case OPEN_TD: /// const tableData = [...state.tableData]; tableData[action.trIndex] = [...state.tableData[action.trIndex]]; tableData[action.trIndex][action.tdIndex] = TD_STATE.OPENED; return{ ...state, tableData, } } } Td컴포넌트에서 액션dispatch(발생) 지금클릭한 tr, ..

useReducer, contextAPI 를 사용해서 지뢰찾기 게임 만들기 Mine Form Table Tr Td 컴포넌트 Mine컴포넌트 (1)useReducer 만들고 (2)초기값들 tableData선언 (3)reducer함수만들고, import React ,{ useReducer, createContext }from 'react'; import Form from './Form'; const initialState = { //(2) tableData:[], timer:0, result:0, } const reducer = (state, action)=>{ //(3) switch (action.type){ default: return state; } } const Mine = () =>{ const [..