웹 게임을 만들며 배우는 React 틱택토 & 지뢰찾기

 

틱택토

---

리덕스의 핵심인 useReducer

리덕스의 대부가 리액트 팀에 합류를 하면서 많은 개념을 가져왔다.

하지만 소규모 앱에서는 리덕스 라이브러리 대신 useReducer와 contextAPI를 쓸 수 있지만, 큰 규모의 비동기 작업에는 리덕스를 쓰는 것이 효율적이다.

 

 

※ 승자가 나올수 없는 게임 틱택토

 

 

Structure

TicTacToe.jsx → Table → tr → td (state는 틱택토에서, 클릭하는 건 td에서 관리한다.)

state가 많아질수록 관리가 힘들어지기 때문에 useReducer를 쓴다.

 

 

 

 

reducer, action, dispatch의 관계

• state안에 데이터가 있다면 직접 수정 불가능하다.
• 수정시 action을 만들어서 수정
• action을 만든 후 dispatch에 하면 state 수정
• reducer : state를 어떻게 바꾸는 지를 switch 문을 사용

 

 

 

 

 

 

현재는 Tr → Td → Table → TicTacToe 순으로 데이터가 넘겨지는 데, Context API로 이 과정을 좀 더 간단하게 할 수 있다.

 

 

 

 

---

 

지뢰찾기 💣

---

리덕스의 contextAPI

다층 관계에서 부모 X 컴텍스트 API에서 값을 직접적으로 가져올 수 있다.

 

 

createContext와 Provider

• createContext()함수를 사용하여 Context 만들기
• Context API의 데이터를 접근해야 하는 하위 컴포넌트를 return 안에서 Provider로 감싸기
• 전달할 데이터는 value={}
• contextAPI는 성능 최적화가 힘들기 때문에 useMemo()로 객체값을 기억하여 캐싱