틱택토 만들어보기

이번에는 리액트 공식 사이트에 있는 

자습서 틱택토를 만들어보겠다.

square.js파일

Board.js파일

Game.js파일

index.js파일 (파일 생성시 기본으로 들어가 있는 파일)

 

style.css파일

 

해당 코드는 틱택토 판을 클릭했을 경우

X만을 출력하도록 만들어져 있다.

O를 출력하는 코드는 추후에 삽입하도록 하고,

우선은 실행시켜보도록 하겠다.

실행시키면 다음과 같은 창이 뜰 것이다.

틱택토의 판을 클릭하면

다음과 같이

판에 X모양이 나타나는 모습을 확인 할 수 있다.