충남대학교 컴퓨터공학과 동아리 GROW에서 주최한 iOS 기초교육에서 학습한 내용을 정리한 글입니다.
작성일자 2022.01.08. (토)
1회차 2021.09.18.(토)
(1) CollectionView와 Custom
이미지 - 수업참고자료
table view 이후 collection view가 나오면서 table view보다는 collection view를 대부분 이용한다. collection view의 동작구조를 잘 알면 table view를 모방할 수 있기 때문이다!
MVC
Model View ViewController
기존 MVC 동작구조
view는 수동적으로 누군가 변화를 주기를 기다리기만 한다.
이런 방식은 controller가 너무 많은 로직이 포함되어 문제가 됨.
더 큰 문제가 발생하는 경우는 테이블뷰나 콜렉션뷰의 경우. 이들은 정적으로 컨텐츠를 보여주는 것이 아니라 스크롤을 내리면서도 새 데이터를 로드하거나 내부의 내용이 바뀌는 등의 많은 동작을 해야하는데 이 모든 상황을 컨트롤러에서 관리하는 것은 사실상 불가능하다.
DataSource 방식의 MVC 동작
delegate 패턴
delegate: 대행자
collection View가 View controller에게 일을 시킬 수 있어야 하는데, 그러면 콜렉션 뷰가 뷰컨트롤러가 대행자임을 알아야하는데, 그것을 지정해주면 코드는 다음과 같다.
대행자를 VC로 지정하는 코드
collectionView.delegate = self
데이터를 가져오는 방식
collectionView.dataSource = self
dataSource의 경우 필수로 구현해야하는 두 개의 함수가 있다.
// 아이템을 몇 개 넣을건지 지정하는 함수
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
// 뷰 안에 무슨 데이터를 넣을건지 지정하는 함수
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = UICollectionViewCell()
return cell
}하지만 위와 같이 코드를 작성하고 실행하면 오류가 발생하게 된다. 논리적으로는 오류가 나지않는 코드이지만, 뷰를 생성하는 데에는 큰 코스트가 드는 일이기 때문에, OS 자체적으로 이를 반복해서 만들도록 작성하면 오류가 발생하도록 처리되어 있다.
우리는 같은 모양의 뷰를 반복적으로 나타나도록 만들 것이기 때문에 뷰를 재사용하는 방법으로 이를 해결할 수 있다.
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ApodCollectionViewCell", for: indexPath)
셀들을 재사용하기 위해 큐에 담아주는 방법이다. 셀은 identifier로 구분할 수 있다.
필요한 뷰가 100개이고 하나의 화면 안에 보이는 셀의 개수는 약 20개라고 할 때, 100개를 한 번에 다 만들필요없이 20개만 만들면 된다. 뷰에서 셀이 보이지않게 되면 이를 큐에 담고 셀을 새로 만드는 것이 아니라 큐에서 이 셀들을 꺼내어 사용하게 된다. ➜ 이런 방법은 메모리효율 측면에서도 좋다!
코드로 segue를 하는 방법
이 부분을 다시 보니 셀이 여러개일때는 뷰컨트롤러 자체에 segue를 연결해주는 방식을 배웠었다. 그동안 나는 셀을 누르면 무조건 이동하는 방식으로 segue를 지정해주었는데, 이 방식을 이용하면 segue 이전에 선행되어야 할 작업을 지정해줄 수 있고 여러 뷰컨트롤러에게 segue가 이루어져야 하는 경우를 처리해줄 수 있다.
뷰 컨트롤러간 segue 생성
segue에 identifier를 지정하고 performSegue의 identifier에 해당 identifier를 입력해주면 된다!
segue를 하기 전에 처리할 작업들을 명시해주는 prepare
segue의 목적지를 지정하고, 그 VC가 DetailVC가 아니라면 return한다. 맞으면 index의 값을 넘겨주는 코드까지 실행하게 된다.
Custom
view을 원하는대로 커스텀해서 재사용 뷰로 사용할 수 있다!
셀들의 간격을 조정해주는 코드
// 라인 간 공간의 크기
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 2
}
// 아이템 간 공간의 크기
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 2
}
// 이거는 인스타처럼 셀이 세개씩 보이게 해줄 코드
// view.frame.width를 그냥 3으로 나눠주면 안되고 위에서 최소 간격을 2로 지정했고 생기는 간격은 두 개이므로 2*2=4만큼 빼준 후 3으로 나눠준 것임
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (view.frame.width - 4) / 3
return CGSize(width: width, height: width)
}또 중요한 부분은 이 코드를 적용할 콜렉션 뷰의 Size inspector에서 Estimate Size를 None으로 설정해야한다는 점이다!! 😢
그동안 코드를 아무리 써도 적용이 되지않아서 자주 헤맸는데 항상 이 문제였다. 디폴트가 Automatic인데 이 값이 적용되어있으면 자체적으로 알아서 계산한 값을 적용하기 때문에 반드시 None으로 설정해주어야 내가 원하는 모양대로 볼 수 있다!
재사용되는 셀들의 값을 초기화해주어야 하는 이유
재사용되기 전에 큐에 들어간 값이 그대로 출력된다. 따라서 내가 의도하지않은 결과값이 초기화가 되지않은 상태로 재사용되어 그대로 보이게된다. 이것을 방지하고 싶다면 예외처리를 이용하여 초기화할 수 있다!
(2)
2회차 2021.09.19.(일)
추후 추가 작성
마무리
작년 가을에 들은 교육이지만 내용이 정말 알차고 좋았어서 꼭 다시 보고 정리해야지 했는데 굉장히 오랜 시간이 걸렸다...!! 학기 중에는 과제에 진도도 따라가기가 나에게는 버거워서 엄두는 냈지만 매번 십분정도 듣다보면 불안해서 다시 과제로 넘어갔다.ㅋㅋ 종강이후 잠시 번아웃 상태로 펑펑 놀다가 (감사히도 녹화 영상을 남겨주셔서!!) 교육 녹화영상을 다시 보게 되었다. 교육을 들을 당시에도 내용이 많이 어렵지는 않아서 실습을 따라가기에 버겁다는 생각이 들지않았는데 글로 정리하면서 보니 당시에는 한 귀로 듣고 한 귀로 흘린 내용이 많았다. 병아리 상태에서 3학년 전공심화 과목의 프로젝트를 iOS 앱 개발을 하고, 최근 스위프트 문법을 중점으로 공부하기 시작한 후 교육영상을 다시보니 중요한 내용들을 정말 간단명료하게 설명을 잘 해주셨다. 이미 알고있거나 자잘한 내용이더라도 괜히 한글자 더 쓰고 정리해보게 된다. 다시 한 번 교육자리를 마련해주신 Grow와 교육 선생님께 감사드립니다! 😃
그리고 나는 MVC가 스위프트에서 기본이 되는 패턴이라고 생각했는데 그렇지않았다. 다음 포스팅으로는 요즘 자주 보이는 MVVM 패턴과 이외의 iOS에서 자주 쓰이는 디자인 패턴에 대해서 자세히 공부해볼 예정이다!
