수정하기 페이지 input에 초기값을 넣고 싶었는데 실패했던 문제를 해결 완료했다. React에는 수정 가능한 초기값을 할당하는 dafultValue라는 속성이 따로 있다. (!!!!!!!) value와 defaultValue도 별개의 속성으로 존재하고, checked와 defaultChecked도 별개의 속성으로 존재한다. Input 사용할 일 있을 때마다 이러한 추가 속성들을 찾아보자.
수정하기 페이지에 이미 작성된 내용을 기본값으로 불러오고, onChange가 이루어진 Input에 한해서만 mutation하는 기능을 구현했다. 이로써 기본 형태 게시판의 목록페이지, 상세페이지, 수정페이지는 구현이 끝났다. 상호 라우팅도 완료했다. 서로 연결되어있는 게시판을 보니 뿌듯하고 기분 좋다.
사실 여기까지는 어제 배운 것이다. 도저히 해결되지 않는 과제가 있어서 붙들고 씨름하다가 어제 TIL을 못썼다. 그 문제가 뭐였냐면..
체크박스 전체선택 알고리즘 구현
위와 같은 UI를 가진 게시판에서 작동하는 체크박스 전체선택 알고리즘을 구현하는 것이다. 처음에는 체크박스의 checked 값을 state로 만들어서 이벤트 발생시마다 변경되게 했다. 그랬더니 모든 체크박스가 다같이 on/off 되더라. 그렇다고 체크박스 개수만큼 함수를 만드는 것은 바보같은 짓이고, 어떻게 해야하나 고민하던 차에 동기분들로부터 배열로 해결 가능하다는 조언을 얻었다.
오늘은 각각의 체크박스에 index 값을 name 속성으로 부여해줬다. (위 예시는 하드코딩이라 하나하나 적어줬지만, API를 불러올 때에는 map의 기능으로 할 수 있을 것이다.) 체크박스의 boolean 값이 true로 변하면 빈 배열에 넣고, false로 변하면 배열에서 제거하는 식으로 함수를 짰더니 개별 체크박스 on/off는 자유롭게 된다! 각각의 <tr>에도 index 값을 넣어뒀으니 선택 삭제 기능도 어렵지 않게 구현할 수 있을 것이다.
배열의 length를 감지해서 전체 체크박스가 자동으로 스위치되는 함수도 구현했다. 그런데 여러번 스위치를 반복하다보면 값에 오류가 나는 순간이 오더라. 주말에는 이 부분을 점검해서 체크박스 알고리즘을 최종 완성할 예정이다.
앞으로 할 것
체크박스 알고리즘 완성하기! 다음 주 화요일 코드리뷰때에 UI와 알고리즘까지 완성된 페이지를 보여주는 것이 목표이다.
타입스크립트를 배웠는데 진심 무슨 소리인지 하나도 모르겠다. 일단 따라는 하는데 왜 이렇게 되는건지 과정이 이해되지 않음. 주말에는 목요일, 금요일 수업 동영상을 다시 보며 타입스크립트를 이해해보자..
