목록전체 글 (119)

개발노트

14 (2)context API

클릭했을때 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, ..
React/basic 2020. 7. 29. 21:59
14. context API

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 [..
React/basic 2020. 7. 29. 20:17
13. (3) useReducer

추가할 기능 -한번 클릭했던 칸 다시 클릭 못하게, -승자 판단, 무승부 판단 한번 클릭했던 칸 다시 클릭 못하게 하기 클릭하면 ''에서 'o'로 data 들어가게 되니까 const onClickTd = useCallback(() =>{ if( tdData ){ return; } ... ,[tdData]); (1)클릭했을때 tdData 값 있으면 그냥 리턴 시켜버리면 된다. useCallback으로 감싸서 함수를 기억하고 있는데, 함수말고도; 너무잘 기억해서 다른 값들을 업데이트 안하니까, 바뀌는값이있을경우 꼭 의존성 배열에 추가해주어야 한다. (2)tdData 바뀌는 값이니까 의존성배열에 추가해줌 dispatch 에서 state바뀔때 비동기 리덕스는 동기 dispatch({type: CHANGE_TUR..
React/basic 2020. 7. 29. 01:59
13. (2) useReducer

클릭할때마다 어떤 tr의 td 누르고 있는지 알아내기 const Td = ()=>{ const onClickTd = () =>{ } return( ) } (1) td를 클릭했을때니까 td에 onClick이벤트 추가. 함수니까useCallback으로 감싸기 (2)Table.jsx { Array(tableData.length).fill().map( ( tr ,i )=>( ) ) } Table-> Tr컴포넌트로, row[] 하나씩 넘길때, 각row의 인덱스도 같이 넘겨줌 (3)Tr.jsx Tr컴포넌트에서 (Tr->Td Props로) 위에서넘긴 row인덱스 받아서 넣고, { Array(trData.length).fill().map(( td ,i )=>( ) )} td만들때 각 0,1,2인덱싱 추가 { Array..
React/basic 2020. 7. 29. 00:30
이전 Prev 1 ··· 20 21 22 23 24 25 26 ··· 30 Next 다음