[1주차] GET STARTED (학습)

[hani0903]

목표

• GET STARTED 섹션 학습
• 틱택토 게임
• React로 사고하기

doc 링크

• 빠르게 시작하기

예상 일정

• 시작일: 2025-05-19
• 종료일: 2025-05-26

진행 사항

• 공식 문서 정독
• 실습 코드 작성
• PR 작성 및 정리
• 블로그/리포지토리 정리

구현 세부 내용

틱택토 게임 페이지 하단에 적혀있는 추가 퀘스트를 구현했습니다.

• 현재 단계에서는 버튼 대신 현재 순서 표시
• Board를 하드 코딩 대신 두 개의 루프로 표현
• 동작을 오름차순/내림차순으로 정렬할 수 있는 토글 추가
• 승리 원인이 되는 세 개의 사각형에 강조 표시 추가 / 무승부의 경우 무승부 메세지 표시
• 이동 히스토리 목록에 좌표도 표시

메모

학습 중 궁금했던 점이나 알게된 점은 이 아래에 추가합니다.

알게된 점

• 무승부를 판별하기 위해 처음에는 board.filter((item) => item !== null).length === 9를 사용했었는데, board.every((item) => item !== null을 사용하는게 더 간결하고 의도가 명확하다는 걸 알게 되었습니다.
• <ol>태그의 reversed 속성을 사용하면 <li> 마커의 순서를 내림차순으로 변경할 수 있다는 걸 알게되었습니다.

궁금한 점

• 공식문서에서는 에서는 과거 상태를 기준으로 state를 변경하는 경우에 단순한 값 전달 방식 setState(newState)를 사용했습니다. setState(prev=>)처럼 업데이트 함수를 전달하는 방식이 안전하다고 알고 있어서 이 코드에서는 왜 문제가 되지 않는지 궁금합니다.
• 언제 꼭 함수형 업데이트를 써야 하는지 기준이 궁금합니다.