개발노트

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

클릭할때마다 어떤 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..

틱택토(삼목게임) 만들기 TicTacToe > Table > Tr > Td const Tictactoe = () =>{ const [winner, setWinner] = useState(''); const [turn, setTurn] = useState('o'); const [tableData, setTableData] = useState([ ['','',''],['','',''],['','',''] ]); } 실제 이벤트 발생하는 곳이 Td컴포넌트 인데, tictactoe 에서 state들을 td로 보내려면 두번이나 거쳐서 Td로 가는 문제점이발생 state 갯수를 줄일수 있는 useReducer const [state, dispatch] = useReducer( reducer, initialState..

useState, useRef 로 변경 import React, { useState , useRef , useEffect} from 'react'; import Ball from './Ball'; function getPickNumbers(){ console.log('pickNum START'); const numArray = Array(45).fill().map( (v,i) => i + 1 ); const shuffle = []; while( numArray.length>0 ){ shuffle.push( numArray.splice( Math.floor( Math.random() * numArray.length ) ,1)[0] ); } const bonusNumber = shuffle[shuffle.l..