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

남현욱
2 min readJun 10, 2019

개요

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

목차

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

라이브러리 설치

styled-componentsopen-color 라이브러리를 설치합니다.

$ yarn add styled-components open-color

컴포넌트 준비작업

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

로직 담기

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

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

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

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

어디 한 번 볼까요?

$ yarn start

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

의도한 대로 잘 나오는 모습

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

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

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

--

--

남현욱

세상이 아름다워지는 것을 지향하는 프론트엔드 개발자 남현욱입니다. 휴먼스케이프에서 프론트엔드 개발을 하고 있습니다.