생기초 TableViewController 사용법!!

안녕하세요!

오늘은 TableViewController 사용법에 대해 알아보려고해요.

정말 기본중에 기본중에 기본인데,

처음하면 어려울 수 있겠다....싶었고!!

정말 하나도 모르시는 분들을 위해, 그리고 제 공부를 위해 

글을 쓰려고 마음을 먹게 되었습니당ㅎㅎ

하나하나 따라하시면..

...이런..

너무...간단한....테이블을...

만들 수 있게 됩니다.

시작...할게요..XD

자, 프로젝트를 하나 만들어주시고

제일 먼저 Table을 담당하는 swift파일을 만들어줄거에요.

New file을 클릭하시고,

기본으로 UIViewController로 되어있을텐데,

UITableViewController로 설정해주세요!!

자 그러면,

코드에 이런것들이 만들어지게 됩니다ㅎㅎ..

자, 위 결과물을 보고 도대체 뭐가 필요할것 같은가요?

저 swift파일에 뭘 구현해야 할 것 같나요??

자, 일단 A,B,C,D,E가 있어야 할 것 같죠!!!

let arr = ["A","B","C","D","E"]

위 코드를 TestTableViewController.swift에 넣어주세요.

그냥 배열이에요!ㅎㅎ

우리는 이 배열을 이용해서 값을 가져와서

테이블에 넣어줄거에요.

자.. 배열도 선언했겠다.. 이제 뭘 하면 될까요?

밑에 함수들이 정의되어있는거 보이시나요?

(viewDidLoad()제외)

뭔가 UITableView이러는 거 보니까 여기서 테이블들을 조정해주는 것 같아요.

 override func numberOfSections(in tableView: UITableView) -> Int {

return 0

 }

자, 위 코드는 뭘 담당하는 함수일까요?

numberOfSections?

섹션의 수를 담당하는 것 같네요! 

네. 섹션의 수를 리턴하는 함수입니다.

위 결과물을 보시면, 섹션이라는 것이 없죠?

섹션을 모르시는 분들을 위해 설명해드리자면, 

자, 이렇게 나누어져 있는 것이 하나의 섹션이라는 거에요.

우리는 저렇게 나누어져 있지 않죠?

그럼 뭐를 리턴해야 할까요?

저 결과물 하나로써 섹션 1개 인 것이니,

return 1

을 해주어야 합니다.

다음으로 넘어갑시다.

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return 0
}

위 코드는? numberOfRowsInSection

섹션 안에 있는 row(행)의 갯수를 리턴해주는 함수에요. 

자. 우리 arr에 몇개가 들어있죠?

5개가 들어있네요.

그러면, 

return 5

를 해주면 될까요?

네. 그래도 됩니다. 

근데!!!!

막 arr가 바뀐다면?

arr에 "F"가 추가된다면?

return 6을 해주어야 겠죠?

매번 바꿔줘야한다는 불편함이 있습니다. 

그래서!!!apple이 친절하게도

arr의 count(수)를 리턴할 수 있는 프로퍼티를 만들어놨습니다 ㅎㅎ

그러니까

 이렇게만 해주면,

매번 바꾸지 않아도 되겠죠?

arr안에 있는 원소의 개수를 리턴해주니까요.

자, 저 밑에 주석되어있는 코드가 있네요?

저것도 구현해주어야 한답니다 ㅠ

정말 어려워보이죠!!!!!!!!!

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

        return cell

}

자. 하나하나 분석해볼게요. 일단 파라미터로, 테이블뷰, indexPath가 주어지네요. 

그리고 UITableViewCell을 리턴해주는 함수입니다. 

cell은 테이블의 하나의 셀을 의미하겠죠?

자. 이제 상수(let)로 선언한 cell을 한번 봅시다.

tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

파라미터로 받은 tableView의 프로퍼티로 dequeueReusableCell이 있습니다.

이 dequeueReusableCell이 하는일은 무엇일까요?

dequeue는.. 큐에서 빼는거 같고..

Reusable 재사용 할 수 있는

cell..같네요.

아 원래 dequeueReusableCell이 뭔지 쓰려다가

너무 ㅠㅠㅠ어려워질까봐....

이것에 관해서는 꼭!!!! 따로 글을 쓸게요.

이 개념도 엄청나게 중요하답니다.

꼭꼭 늦지않게 글 쓸게요!!

(글 썼어요ㅎㅎ 요기가시면 dequeueReusableCell이 무엇인지 알 수 있으실 거에요.)

그냥 identifier가 

reuseIdentifier인 것을 cell에 넣어주고 리턴해주는 거에요!!

일단 cell에 넣긴 넣었는데...우리는 배열의 원소들을 화면에 보이게 하고싶죠?

그러면, 

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
        cell.textLabel?.text = arr[indexPath.row]
        return cell

}

위 코드를 넣어주면 된답니다.

해석해 볼까요?

identifier가 reuseIdentifier인 cell의 textLable의 text에

arr[indexPath.row]를 넣어줘~~

(textLabel은 우리가 추가하지 않았지만, 자동으로 있는 프로퍼티랍니다!)

indexPath.row? 이건 무슨 말일까요?

indexPath는

tableView의 행을 식별하는 인덱스 경로에요.

그 경로 행에 위치를 인덱스로 가지는 arr의 원소를 textLabel에 써주겠다는거죠.

arr[indexPath.row]

이 코드가 혹시 이해가 잘 안가시나요?

아니 indexPath의 row를 뽑아왔는데 그게 arr의 인덱스로 들어가면 그게 뽑히나???

(저의 궁금증이었습니다.....)

잡담을 좀 하자면,

글을 쓰다보면 평소엔 지나쳤던 사소한 코드들이 궁금증으로 다가옵니다.

그리고 뭔가 이 코드를 이해하지 않고서는 좀.....ㅎㅎ

제가 이해를 해야 이렇게 글을 쓰면서 가르쳐 드릴 수 있는거니까요!!!

그래서 꼭 이해하고 넘어가려고 해요. 몇시간을 날리기도 하지만 그래도 제꺼가 되는거니까요!!!

평소에 지나쳤던 코드들도 하나하나 보시면서 어떻게 이뤄지는 코드인지

분석해보는 것도 좋을 것 같아요!! ㅎㅎㅎ

잡담이 길었네요..

---

arr[indexPath.row]가 어떻게 arr의 원소에 접근하는지 알아봅시다.

먼저,

 

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

        cell.textLabel?.text = arr[indexPath.row]

        print("Function call")

        return cell

    }

이 코드!!! 우리가 만드는 결과물을 만들기위해 몇번이나 불리게 될까요?

자, 이 코드가 한번만 불리게 되면 모든 셀이 다 만들어질까요? 

결론부터 말씀드리자면, 아닙니다!!

위에서도 언급했듯이, 이건 테이블의 셀 하나를 리턴해주는 거에요.

저 print문이 몇번이나 호출되는지 한번 봅시다. 

(오류가 나시나요? 정상입니다. 그냥 같이 실험하는 느낌으로 같이 보기만해요XD)

다섯번이 호출됐네요!!

arr에 있는 원소가 5개였죠?

그 원소의 개수만큼 셀을 그려야 되니까 5번이 그려진거겠죠?

자, 이제 위 메소드가 그려야할? 셀의 갯수만큼 호출된다는 것은 알겠습니다.

그럼 indexPath는 뭘까요?

print(indexPath)로 한 번 호출해볼까요?

오 뭔가 값이 2개가 있네요!!!

그러면 우리가 원하는 print(indexPath.row)를 호출해 봅시다. 

오...우리는 indexPath의 두번째에 위치한 값을 가져온 거네요.

그럼 indexPath는 [?,row] 가 되겠네요.

근데, indexPath.row의 값을 가져와보니 0,1,2,3,4죠?

그러면 arr[indexPath.row]는?

네. 당연히 arr의 첫번째 원소부터 접근이 가능해지게 되겠죠?

ㅎㅎ흥미롭네요

그럼 아까 indexPath가 [?,row]로 되어있다고 했는데,

첫번 째 값은 뭘까요?

우리가 만드는 케이스에서는 모두 0이였죠?

이거는 section을 의미한답니다. 

위에서 우리는 섹션을 하나만 줬었죠?

(섹션도 0부터 시작하나 보네요.)

0번째 섹션의 1번째 행

0번째 섹션의 2번째 행

.

.

이런식이네요.

그러면!!

"indexPath는 [section,row]로 이루어져 있는 행을 식별하는 상대적인 경로"

라고 할 수 있겠네요.

---

그런데!!!!!

저는 압니다.. 

여러분들이..

이러한 에러가 계속 났다는 것을..

그래서 저 print문도 에러가 났다는 것을..

왜냐하면!!!우리는 아직 스토리보드 작업을 하나도 안했기 때문입니다..

아 이걸 원래 위에 넣을려고 했는데

그냥 코드 설명은 꼭 다 하고 가고싶어서..

ㅎㅎ..

자 이제 !

스토리보드로 가주세요

스토리보드가 위 그림 처럼 되어있죠?

이걸 바꿀거에요. TableViewController로!!

자, 원래있던 ViewController를 지워주시고,

 Table View Controller를 추가해주세요.

그리고 저기 빨간색으로 네모박스 쳐놓은 

Is initial View Controller

를 꼭 체크해주세요!

자, 한번 실행해 볼까요?

...

ㅠㅠ

왜 아무것도 안나올까요?

중요한 작업 두가지를 해주지 않았어요.

TableViewController를 사용하실 때 

반드시!!!!!해주어야 하는 작업이니

꼭!!!기억하세요.

1. 우리가 추가해준 TableViewController의 class를 우리가 추가해준

TestTableViewController.swift로 해준다.

이게 무슨소리냐..

이건 TableViewController가 아니고, 다른 컨트롤러일때도

반드시 해주어야하는 작업이에요.

TableViewController를 클릭하고, 

 show the identity inspector 로 가주면,

클래스를 지정하는 란이 있어요.

이것은, 이 TableViewController를 담당할 클래스를 지정해주기 위함이에요.

자, 화살표 버튼을 클릭하면,

우리가 아까 만든 TestTableViewController가 있네요!!

이 클래스 파일로 지정해줘야 우리가 위에서 한 작업들을

이 TableViewController에 적용시킬 수 있어요.

 TestTableViewController를 클릭하고,

엔터를 꼭 눌러주세요.

2. cell의 identifier를 지정해준다.

1번작업을 한 뒤에 실행시키면, 이번엔 아예 오류가 나는 것을 볼 수 있습니다. 

오류가 나는 이유를 보니 reuseIdentifier로 identifier를 가지는 셀을  dequeue할 수 없다고 하네요. 

그리고 반드시 identifier를 등록해주라고 하네요.

네. 정말정말 중요한 작업의 마지막은

그건 바로 cell의 identifierf를 설정해주는 작업이에요.

cell의 identifier?..

뭔가 익숙하지 않으신가요?

바로 여기서 identifier가 나왔었습니다.

identifier로 reuseIdentifier를 가지는 셀을 cell이라는 변수에 넣어줬어요. 

하지만 우리는 cell의 identifier를 지정해준 적이 없죠?

지정해주러 가봅시다. 

스토리보드에 가주신뒤 

순서를 따라 가주세요.

그리고 저 identifier를 입력하는 곳에,

reuseIdentifier를 입력해주시거나,

만약 나는 다른걸로 해주고싶다!!!

하면

예를 들어 MyTableCell을 해주고싶다! 하면

이 코드를 수정해주세요.

드디어!!!!!실행하면

짠~~~~~~

ㅎㅎㅎ

잘 따라오셨나요?

왕초보를 위한 TableViewController 공부였습니다!!

도움이 되었으면 좋겠어요!

지적은 환영입니다!!