React 틱택토 3편

 

2편에서는 calculateWinner 즉 승자예측 함수까지 작성을 완료했다

 

이제 본 코드에 함수를 호출에서 사용하면 해당 게임에 대한 코드작성도 마무리 하게 된다.

 

 

board 컴포넌트 안에 winner라는 변수를 선언하고 calculateWinner 함수를 호출한다.(인자값은 sqaures)

 

그리고 그 밑에 ||  or 연산자를 통해 winner != null을 추가해준다 

 

즉 승자가 없어도 게임이 계속 진행되는 것이다. 

 

이제 페이지에 채워줄 render 함수로 가보자

 

 

Render()

 

 

마찬가지로 winner라는 변수를 선언하고 현재상태의 squares라는 인자값을 가진 calculateWinner 함수를 호출한다..

 

그리고 상태변수 status 를 선언해주고 대망의 삼항연산자 안에 삼항연산자를 선언한다.

 

해당 코드의 내용은 내가 주석으로 위에 적어놨다.

 

winner 가 null 값이 아니면 즉 , winner 에 값이 정해지면 winner 가 누군지 화면에 출력해준다.

그렇지 않다면 next Player를 출력해준다.

그리고 그 next Player가 누구인지에대하여 현재상태(xIsNext를 확인하여 true이면  X인지 false 이면 O인지 출력해준다.)

 

위 내용을 한줄로 적은게 

 

status = (winner... 이다) 

 

그리고 div 안에 status 변수를 담아줘서 화면에 표시하게 하자.