리액트로 만드는 스도쿠 — 6. 컴포넌트 만들기

개요

이 글은 React로 스도쿠를 만드는 과정에 대해 포스팅하지만, 강좌가 아닙니다. 제가 저만의 과정으로 차근차근 만들어나가고 있어 꽤 난항이 예상됩니다 :)

목차

1. 만들기 전
2. 프로젝트 준비하기
3. 스도쿠 서비스 만들기
4. Redux 스토어 만들기
5. 스도쿠 서비스를 이용하는 사가 만들기
6. 컴포넌트 만들기 (현재 포스트)
7. 게임 로직 담기 & 배포하기

라이브러리 설치

styled-components와 open-color 라이브러리를 설치합니다.

$ yarn add styled-components open-color

컴포넌트 준비작업

우선, 스도쿠 관련 로직을 처리할 SudokuContainer와 Grid, Cell 컴포넌트를 만듭니다.

로직 담기

SudokuContainer에서 필요한 작업들을 해줍니다.

Grid에 적절한 데이터를 넘겨주고 나면, 남은 작업들은 Grid의 몫입니다.

Grid에서도 모양을 다 잡아줬으니 이제 Cell만 만들면 문제없을 것 같습니다.

모든 작업을 완료했으니, App에 SudokuContainer를 넣습니다.

어디 한 번 볼까요?

$ yarn start

위 명령어를 입력한 뒤, 직접 눈으로 테스트해봅시다.

의도한 대로 잘 나오는 모습

이제 어느 정도 스도쿠의 모양을 갖추어가는 것 같습니다. 그래도 몇 가지의 남은 일들이 있습니다.

1. 처음 board에 있는 값과 이미 맞춘 값을 변경할 수 없어야 한다.
2. 3번 오답 시 게임을 종료한다.
3. 난이도를 조절할 수 있어야 한다.
4. 다 풀었음을 자동으로 감지하고(board와 solution 비교) 게임을 종료한다.

다음 포스트에서는 남은 일들을 하나씩 처리해볼 예정입니다.