tictactoe 앱 만들기

 

기존에 만들어진 파일들을 사용할 것이므로 깨끗한 상태로 만들어 준다.

 

우선, App.js 파일의 div 부분을 지워주고 맨 위의 2줄도 지워서 밑의 상태로 만들어 준다.

 

 

두번째로는 App.css와 Index.css 파일의 내용을 모두 삭제 시켜준다.

 

마지막으로 App.test.js 파일이 현재 필요없으므로 완전히 삭제시켜준다.

 

 

 

 

tictactoe 를 구현하기 위해 App Component와 Board Component, Square Component가 필요하다.

 

 

 

● App 컴포넌트 UI 만들기

 

App.js에서 리액트 화면에 나타낼 큰 틀을 만들어 준다.

App.css를 import 할 것이므로 맨 위에 import도 작성해준다.

 

 

 

그리고 App.css와 index.css 를 스타일링 해준다.

App.css

 

index.css 여

여기서 font 의 스타일을 Century Gothic으로 하는데 만약 이것이 적용되지 않는다면 Futura로 이것도 적용되지 않는다면 sans-serif로 적용되도록 하는 코드이다.

 

 

구조 파악 위해 글씨 적어줬다.

 

 

 

그리고 리액트 화면을 확인해보면 이렇게 나온다.

 

 

 

 

● Board, Square 컴포넌트 생성하기

 

src 폴더 밑에 new folder를 눌러 Component  폴더를 만들어 준 뒤 그 안에 new file로 Board.js  파일을 만들어 준다. 

Square.js 파일도 만들어 준다.

 

 

이 Board.js 는 클래스형 컴포넌트를 이용해서 만들 것이다. 이후 나중에 함수형 컴포넌트로 바꿀 것이다.

(공부를 위해 클래스형 컴포넌트 사용)

 

 

 

이렇게 하나하나 작성하면 오래 걸리기 때문에 간단한 명령어로 코드를 작성해주는 확장 프로그램을 다운받아 다시 실행해주면 된다.

 

자동 import도 하기 위해 밑의 것도 다운받아 주고 vscode를 다시 실행시켜준다.

 

 

다시 실행한 뒤 rcc 를 입력해주면 자동으로 코드들이 작성되는 것을 확인 할 수 있다.

 

 

 

다시 square.js로 가서 div을 button으로 수정해준다.

그리고 export 옆에 default를 작성해 board에서 square 를 가져올 때 기본 square를 사용하도록 할 것이다.

 

 

Board.js로 와서 Square 클래스를 사용하도록 import를 걸고 div 안에 <Square /> 를 작성해준다.

 

 

이렇게 해도 되지만 Board.js 안에 Square 함수를 만들어서 사용해도 되므로 수정해본다.

클래스 안에 renderSquare 함수를 만들어 i 로 밑의 0부터 9까지의 숫자를 받아 오도록 한다.

 

 

 

이번에는 App.js에서도 Board.js 파일을 받아와야하므로 <Board />를 작성해준다. 그러면 자동 import도 생기게 된다.

 

 

 

그리고 다시 리액트 앱을 확인해보면 이런 화면이 나오게 된다.

 

 

 

이번에는 스타일링을 하기 위해 css도 작성해준다.

 

 

그리고 Square.js에서 Square를 지워주고 css를 import로 걸어준다.

 

마찬가지로 Board도 css를 import 걸어준다.

 

 

 

그러면 이러한 결과가 나오게 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

* 코드 한문장 복사 할 시 : shitf + alt + ↓

코드 한 줄씩 이동 : alt + ↓ or ↑