[Swift-TIL] 테이블 뷰로 화면 그려보기

오늘은 테이블 뷰에 대해 배운것을 적어보겠다.

테이블 뷰 이렇게 생겼다.

 

스위프트 UI의 List와 비슷해 보인다.

UIKit의 기초가 시작되는 곳이다.

 

테이블 뷰가 지금도 많이 쓰이는가?

안쓰일 수 도 있지만,

테이블 뷰 처럼 생긴 화면이

사실상 굉장히 많다.

 

아주 간단한 뷰 하나 띄우기만 해보겠다.

이 테이블 뷰의 경우

글로만은 표현하기 쉽지 않으니,

일단 만들어 보면서 설명을 해보겠다.

 

오랜만에 글을 쓰다보니..

업데이트를 해줘야하는..

귀찮음이 있다..

 

일단은 뭐... 기다려보겠다.

음... 약 15분가량..? 걸렸다..

 

먼저, Main 스토리보드에서

새로운 뷰 컨트롤러를 넣어준다.

이렇게 새로 만든 뷰 컨트롤러를

인스펙터에서

"is Initlal View Controller"

체크/설정 해준다.

이 상태로 실행을 하면

아무것도 안나오는게 맞다.

 

새로운 파일을 하나 만들어준다.

연결해줄 테이블 컨트롤러를

만들어준거다.

 

옵션+선택 을 눌러서

화면을 두개로 갈라주는데,

어떻게 사용하던지 자신이

보기 편한대로 하면 된다.

Do any additional setup after

loading the view

뷰가 로딩 된 다음에 셋업을 해달라는 뜻이다.

 

우선은 백그라운드 컬러를 브라운으로 설정해주겠다.

잘 연결이 되었는지를 보기위함이다.

엥..?

안나온다...

당연하게도 연결이 안되었기 때문이다.

 

슬프케도 스토리보드에서는

코드를 쳐서 실시간으로

그 코드가 제대로 적용되고 있는지

스토리보드 화면에서는 알 수 없다.

 

스위프트 UI는 가능은 했지만,

스토리보드는 그게 안된다..

 

아까 생성한 컨트롤러를 누르고

인스펙터에서 클래스를 확인해보면

컨트롤러의 연결을 알 수 있다.

 

테이블 컨트롤러와 연결해주고

시뮬레이터를 실행하면 될것이다.

이런식으로 스토리보드는

계속해서 시뮬레이터를

확인을 해야한다.

 

먼저 테이블 뷰를 넣어보았다.

이걸 실행해보면 나올까?

잘 나온다.

여기서 끝이면 참 좋겠지만,

여기서 끝이 아니다.

 

우선은 공백없이 테이블 뷰의

위/아래/양옆 값을 0으로 주겠다.

이제 셀을 넣어보겠다.

셀도 커맨드+쉬프트+L로 넣어보겠다.

테이블 뷰 안에 셀이 잘 들어간걸

볼 수 있다.

 

여기서부터는 많이 해보면서

익혀야하는 부분의 영역이기 때문에

외우면 좋지만, 지금은 많이 익히는게 좋다.

 

조금은 복잡한 과정이기 때문이다.

무슨 과정이길래? 복잡한것인가?

스토리보드에서 만들어진 컴포넌트들을

코드와 연결시켜주고 코드로 컨트롤하는

그러한 과정이기 때문이다.

테이블 뷰를 먼저 연결해줬다.

이 상태에서 이제 컨트롤을 해준다면

테이블 뷰에 백그라운드 색상을 주겠다.

연결이 잘 되었음을 알 수 있었다.

 

그리고 지금부터는

필자의 선호하는 방식이 때문에

반드시 이렇게 할 필요는 없다.

extension으로 테이블 뷰에 관련된 것들을

바깥으로 빼고 싶었다.

 

여기에 테이블 뷰 관련된 것들을

넣어줘도 된다는 뜻이다.

"UITableViewDelegate"와

"UITableViewDataSource"를

상속해준다.

이 둘을 상속을 받으면,

프로토콜을 채택하라고 뜬다.

프로토콜을 채택을 하면 반드시 해줘야하는게 있는데,

그걸 여기 클래스에다가 구현하는게 아닌

extension 으로 분리해서 보는게 편하다.

이건 사바사이기 때문에 그냥 여기 클래스에다가

다 모아두어도 상관은 없다.

 

이건 제각각 스타일이 다르다.

이 프로토콜을 채택을 했다면

당신은 반드시 이것을 구현해야한다.

Fix를 누르면 이와 같이 뜬다.

이것들을 구현한다면,

나온다는 것이다.

 

저 코드들을 읽어보면서 무엇이 다른가 보면

numberOfRowsInSection과 cellForRowAt

이렇게 둘이 다르다는 걸 알 수 있다.

 

numberOfRows In Section

이줄을 읽어보면 "섹션에 로우가 몇개 들어가냐?"

라는 질문을 던지고 있는 것이다.

 

Int 이니까 숫자만큼 일 것이고,

5개를 리턴 받겠다고 해주었다.

 

다음으로 이름을 보아하니,

cellForRow At

음~ 이 Row에 들어가는 셀이 뭐냐?

라고 묻고 있는데;; 이게 뭘까...?

일단은.. 리턴값으로

UITableViewCell()을 해주겠다.

음... Cell이 있으니까

오른쪽에 셀도 연결해주는가?

이번엔 "컨트롤 + 드래그"로 연결하는게 아니다.

Identifier에서

Reuse Identifier

즉, 이 셀을 가르키는 고유의

식별 값을 말하는 것이다.

 

여기에 그냥 myCell 이라고 하겠다.

오... 뭔가 바뀌었다.

이제 이 고유의 식별값을 기억하자.

이렇게 셀을 하나 만들어준다.

어떻게 만들꺼냐하면,

"withIdentifier"

Identifier 라는게 보이는데

여기에 아까 기억해두라고 했던

myCell 이라는 Identifier를 넣어준다.

IndexPath는 어디있는가??

왼쪽 이미지에 있는 IndexPath를

오른쪽 이미지처럼 넣어준다.

이렇게 셀을 설정을 해줬는데,

이 코드는 테이블 뷰의 셀에 표시될

텍스트를 설정해준거다.

 

시뮬레이터를 실행해 봤다.

뭐... 변한게 없다.

이건 고민해도 방법이 잘 안나온다.

왜냐면 그런 방법이기 때문이다.

 

이럴 땐

이렇게 해주면

잘 나오는 것을 알 수 있다.

 

그런데 뭔가가 조금은 아쉬운 느낌이 있다.

테이블 뷰를 5개를 리턴을 했는데..

저러한 방법밖에는 없는 것인가?

 

데이터를 배열로 넣어보겠다.

cellData 라는 변수를 만들어주고

첫번째 셀은 "Hello Noel"을 넣어주고,

두번째 세번째는 자신이 원하는 단어나 글로

작성해서 넣어주면,

이렇게 3개만 일단 넣어주고

이렇게 해주면,

헉...

죽어버린다...

바로 이런 부분이 어렵다는 것이다..

왜 이러한 문제가 나오는가?

"numberOfRowsInSection"

여기를 보면 return 값이 5개이고

이 부분은 5번을 돌게 된다.

0, 1, 2, 3, 4 이렇게 도는데

데이터는 3개이고, 3과 4를 하다가

앱이 죽어버리는거다..

그러면 이 return 개수는

카운트로 맞춰줘야 한다.

이렇게 해주면 가진 데이터의 개수만큼 돌면서

그려주는 그런 프로세스가 된다.

시뮬레이터에서도

잘 작동하는걸 알 수 있었다.

 

어떻게 보면 많이 많이 하다보면

익숙해 지게 되는 것이다.

 

이러한 환경이 UIKit의 환경이다.