일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- React
- 리액트컴포넌트
- sequelize
- node
- NPM
- mongoose
- 리액트
- npm명령어
- React Component
- nodeJS
- 시퀄라이즈
- component
- MongoDB
- 시퀄라이즈공부
- 리액트스타디
- mongo
- 리액트기초
- nodejs교과서
- 제로초예제
- express-generator
- sementicversion
- 클래스컴포넌트
- NoSQL
- Today
- Total
목록React (40)
개발노트
칸 열었을때 지뢰 갯수 표시해주기 (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 [..
추가할 기능 -한번 클릭했던 칸 다시 클릭 못하게, -승자 판단, 무승부 판단 한번 클릭했던 칸 다시 클릭 못하게 하기 클릭하면 ''에서 'o'로 data 들어가게 되니까 const onClickTd = useCallback(() =>{ if( tdData ){ return; } ... ,[tdData]); (1)클릭했을때 tdData 값 있으면 그냥 리턴 시켜버리면 된다. useCallback으로 감싸서 함수를 기억하고 있는데, 함수말고도; 너무잘 기억해서 다른 값들을 업데이트 안하니까, 바뀌는값이있을경우 꼭 의존성 배열에 추가해주어야 한다. (2)tdData 바뀌는 값이니까 의존성배열에 추가해줌 dispatch 에서 state바뀔때 비동기 리덕스는 동기 dispatch({type: CHANGE_TUR..