테이블 뷰 셀 오류

오류 났을 때 바로 정리 좀 할걸..
왜 안되지 하다가 해결하고 나서야 블로그를 쓸 생각을 했다..

---

💻 구현

테이블뷰 컨트롤러를 이용하여 쇼핑 리스트 추가하기를 구현하고 있었다.
오른쪽에 즐겨찾기 버튼과 왼쪽에 체크박스 이미지를 놓고
별 버튼을 누르면 채워진 별로 즐겨찾기 활성화, 셀을 누르면 체크박스 이미지가 채워져 확인 완료 표시를 구현하려 했다.

checked는 체크박스 체크 유무, like는 즐겨찾기 유무

🚨 문제

1. 버튼 이벤트 적용한 후 리스트를 추가하면 즐겨찾기 버튼 이미지가 제멋대로 채워졌다가 사라지는 오류가 생겨남
2. 셀을 선택하면 체크박스 이미지 뷰의 이미지를 변경하였으나, 리스트를 추가하면 체크박스가 모두 리셋이 됨.

 

🤯  나의 노력

테이블 뷰에대한 이해도가 매우 낮은 상태다 보니 어떤 메서드를 언제 어떻게 사용할 지 모르기에 이곳저곳 구현을 해보았고
TableViewController에 didSelectRowAt 또는 TableViewCell의 setSelected 메서드를 활용헤야 함을 깨달았다.

결론적으로 나의 문제는 재사용 메커니즘과 tableView.reloadData()에서 발생함을 알게되었다.

 

💡 해결

🔎 재사용 메커니즘

테이블 뷰에서는 셀을 생성할 때 재사용 메커니즘을 적용하여 이미 만든 셀을 재사용한다.

이러한 이유로 셀 안에 생성한 버튼에 액션 연결을 하게 된다면 새로운 셀 추가하여 재사용 시 액션이 서로 꼬이는 문제가 발생한다고 한다.

때문에 내가 클릭한 버튼이 어디에 있는 버튼인지 알아내기 위해 sender.tag()를 이용하기로 한다!

셀 생성 시 indexPath.row를 이용하여 버튼마다 tag번호를 부여하였다.

버튼과 동시에 이미지 뷰에도 태그를 부여하였다.

그렇다면 버튼 액션은 어떻게 연결할까?

버튼을 생성하면서 addTarget을 사용하여 액션을 연결해주었다.

@objc를 이용하여 액션 함수를 구현하였다.

버튼 클릭 시 sender를 이용하여 tag 번호를 얻고, tag 번호를 통해 list를 가져올 수 있다.

 

🔎 갱신

처음에 셀 선택 시 값 변경을 tableViewCell에 setSelected() 메서드에 구현하였다.

리스트 추가 시 tableView.reload()를 이용하여 갱신을하면 각 셀 마다 setSelected()가 계속 호출되어 bool값을 변경하는데에 문제가 발생하였다.

하지만 변경을 적용하려면 갱신을 수행해야 했고, setSelected()보다 didSelectRowAt에서 값 변경을 수행하고, 갱신을 수행하는 것이 해결 방법임을 알게되었다.

셀 선택 시 didSelectRowAt이 호출 될 것이고, 호출이 될 때 checked의 toggle()을 이용하여 bool값을 반대로 변경해주었다.

 

테이블 뷰의 갱신 시기는 shoppingList의 데이터에 변화가 생길 때 마다 해야하기 때문에 didSet 프로퍼티를 이용하기로 했다. 

 

 

갱신 작업은 tableViewController 영역에서 수행하고, tableViewCell 영역에서는 checked와 like가 가진 값만 보고 적용하는 것만 구현하면 된다.

 

 

---

오류를 마주하면서 테이블 뷰의 작동 방식에 대해 공부할 수 있는 기회가 되었다.

tableView가 reload될 때 마다 setSelected()가 실행되었고, 이 부분이 내가 마주한 오류의 이유가 아니었을까?

 

그리고 tag의 활용 방식에 대해 확실하게 학습이 되었다. 고유의 번호를 가지고 있기 때문에 번호만 안다면 원하는 위치의 값을 가지고 올 수 있다.

만약 배열의 위치를 정렬한다거나 삭제 추가를 통해 인덱스 값이 바뀌게 된다면 tag를 사용하기에 문제가 있지 않을까 생각이 든다.

다른 방법엔 무엇이 있는지도 알아봐야겠다.