[react] Tic-Tac-Toe 개선사항 3번

ChanSol Jeong·2023년 8월 24일

react

목록 보기
10/13
post-thumbnail

Tic-Tac-Toe 개선사항 3번에 대하여
3.Add a toggle button that lets you sort the moves in either ascending or descending order.
history의 정렬 순서를 변경가능한 toggle 버튼 추가

신규 추가한 소스

const [sort, setSort] = useState('ascending')
const handleToggle = () => {
  if (sort === 'ascending') {
    setSort('descending')
  } else if (sort === 'descending') {
    setSort('ascending')
  }
};

JSX 수정사항

처음에는 moves를 함수로 수정하고 if문으로 sort값에 따른 moves의 반복문자체를 수정하려고 했으나,

react의 특징상 moves의 결과값은 JSX의 배열로 이루어져있으므로 단순히 moves의 결과값을 reverse()를 이용하여 뒤집어주면 된다는 것을 깨달았다.

역시 사용하는 도구의 특징을 잘알고있으면 조금 더 스마트하게 처리할 수 있는거같다.

profile
Compostion API 맛있다!

0개의 댓글