[패스트캠퍼스] React 강의 7주차

어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다!

새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다.

이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로  옮겼다.

처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서

board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다.

 

코드는 이런식으로 다시 짰다.

 

좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다.

처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다.

나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다는 Eslint의 경고에 이해를 할 수 없었다.

하지만 코드는 거짓말 치지 않고 역시나 내가 잘못했던 것이었다🥲

잘못을 인지하고 "}" 위치 하나를 바꿨더니 다시 잘 작동되었다.

 

저번과는 다르게 이번에는 누르는 것에 따라 Next player의 내용도 바뀐다.

그리고 한번 누른자리는 다시 눌러지지 않도록 함수를 짰기 때문에 다 눌렀을 때는 다시 작동되지 않는다.

 

그리고 다음 강의는 "전개 연산자"에 대해서 배웠다.

위 코드에서도 전개 연산자를  사용해서 넣는 부분이 있는데, 

이렇게 history 값들을 전개해 넣는 것과 squares의 새로운 Squares의 값을 맨 뒤에 추가해주는 것이다.

전개연산자를 사용하면 해당하는 값만 들어가기 때문에 값들을 합치기에 딱 좋은 것 같다.

처음에는 전개연산자를 활용하는 법이 헷갈렸는데 하다보면서 사용하는 횟수가 더 많아지는 걸 경험할 수 있었다.

 

히스토리를 추가 후 JumpTo 함수를 생성해서 과거로 돌아갈 수 있도록 만들어줬다.

이런식으로 초록색 버튼을 누르면 그 히스토리로 다시 돌아가 다시 시작할 수 있게된다!

그리고 그 시작지점부터 다시 초록색 버튼으로 기록이 남게 된다.

처음에는 그냥 조그맣게 대충 만들었다가 기능을 모두 구현 후  앱스타일링 까지 변경하고 완료된 모습이다.

이 프로젝트를 깃허브에 커밋하고 푸쉬후 배포까지 하고 완료한 상태이다.