리액트-8

🔗강의자료 주소

지뢰찾기

Context API 소개와 지뢰찾기

• context API 사용해서 dispatch를 계속 전달해주지 않고 한번에 전달할 수 있는 방법임.

createContext와 Provider

📝MineSerch.jsx

export const TabelContext = createContext({
    tableData: [],
    dispatch: () => {},
}); //기본값을 넣을 수 있음.

<TabelContext.Provider value={{tableDate: state.tableDate, dispatch }}> 
  <Form/> 
  <div>{state.timer}</div> 
  <Table />
  <div>{state.result}</div>
</TabelContext.Provider>

• context API가 prrvider를 제공함.
  데이터는 value에다 넣음 << 자식 컴포넌트에 제공할 데이터

• 📝Form.jsx 에 dispatch를 불러올 수 있음.
  const {dispatch} = useContext(TabelContext);

• 근데 value값을
  value={{tableDate: state.tableDate, dispatch }}
  이렇게 불러오면 성능에 문제 (새로운 객체가 생기면 매번 새롭게 리렌더링) 발생.
  👉캐싱해주면됨!
  const value = useMemo(()=> ({tableData: state.tableDate, dispatch}), [state.tableData]);// 캐싱해줘야함
  테이블 값이 바뀔 때 갱신해주면 됨.

• dispatch는 항상 같게 유지가 됨.

useContext 사용해 지뢰 칸 렌더링

• dispatch로 action이 됨.

왼쪽 오른쪽 클릭 로직 작성하기

1. 칸 클릭하면 OPEN_CELL되어서 몇번째 칸 몇번째 줄인지 체크되어서 칸이 변화하게 만듬

2. 오른쪽 클릭했을때 메뉴가 안뜨게 e.preventDefault() 해주기

지뢰 개수 표시하기

칸 클릭 -> 주변 칸에 배열생성 -> 지뢰 있는 칸 개수세기

빈 칸들 한 번에 열기

• 클릭한 칸만 새로운 객체로 불러와야함
• 불변성을 지켜야하기 때문에 모든 칸을 새로 불러와야함.
• checkAround 내 기준으로 검산을 하는 함수
• 한번 검사한 칸은 다시 검사하지 않도록 하는 캐싱작업필요
  👉checked 배열만들기

if (checked.includes(row + '/' + cell)){
  return;
} else {
  checked.push(row + '/' + cell);
}// 한 번 연칸은 무시하기

• 재귀함수로 처리