TAGS
주제로 글을 찾습니다
Tech, Domain, Journal 글에 붙은 공통 태그를 모았습니다.
UIKit의 내부 동작 원리
Runloop, CATransaction, Core Animation layer tree 등 UIKit이 화면을 그리기까지의 내부 동작을 파이프라인 단계별로 정리한다.
React Native New Architecture의 내부 동작 원리
React Native에서 버튼을 탭하면 무슨 일이 일어날까?
타깃액션과 네트워크 데이터로 화면 채우기
지금까지 화면을 그렸지만, 아직 사용자 입력을 받지 못했다. 버튼을 눌러도 아무 일이 안 일어난다. 입력을 코드에 연결하는 UIKit의 방식이 타깃액션(target-action)이다.
명령형에서 선언형으로
UIKit을 쓰다 SwiftUI로 넘어오면 가장 먼저 찾게 되는 것이 "화면을 다시 그리는 함수"다. UIKit에서는 그게 일이었기 때문이다. 카운트가 하나 늘면 countLabel.text를 새로 대입하고, 버튼을 잠가야 하면 button.isEnabled = false를 부른다. 데이터가 바뀔 때마다 그 변화를 화면에 반영하는 코드를 사람이 직접 써 준다. 이게 명령형 방식이다.
주요 컴포넌트와 MVC
지금까지 뷰를 붙이고, 화면을 넘기고, 배치를 잡는 뼈대를 봤다. 이제 그 위에 올릴 실제 부품을 다룬다. iOS 화면 대부분은 몇 가지 표준 컴포넌트의 조합이다. 글자를 보여 주는 UILabel, 탭을 받는 UIButton, 입력을 받는 UITextField, 그림을 그리는 UIImageView, 그리고 목록을 그리는 UITableView다.
앱은 어디서 시작하는가
C 프로그램에는 main 함수가 있고 거기서 실행이 시작된다는 걸 학부에서 배웠다. 그런데 처음 만든 iOS 프로젝트를 아무리 뒤져도 main이라 부를 만한 곳이 없었다. AppDelegate가 있고 SceneDelegate가 있는데, 둘 중 무엇이 먼저 도는지, 애초에 이 코드를 누가 부르는지가 불투명했다.
오토레이아웃과 코드 기반 UI
앞 장까지는 뷰의 위치를 frame에 좌표 숫자로 직접 넣었다. 작은 예제에선 잘 되지만, 실제 앱에서는 금방 깨진다. iPhone SE의 좁은 화면과 큰 Pro Max의 넓은 화면은 폭이 다르고, 가로로 돌리면 또 달라진다. "왼쪽에서 320만큼" 같은 절대 좌표는 특정 기기에서만 맞는다.
뷰컨트롤러 생명주기와 화면 전환
앞 장에서 화면은 뷰의 트리라고 했다. 그런데 그 트리를 누가 만들고, 데이터를 채우고, 화면이 나타나고 사라질 때 뒷정리를 하는가. 그 담당자가 UIViewController다. iOS에서는 화면 하나에 뷰컨트롤러 하나를 대응시키는 것이 기본이다. 로그인 화면, 목록 화면, 상세 화면이 각각 별도의 뷰컨트롤러다.
뷰와 뷰 계층
iOS 화면을 처음 뜯어볼 때 가장 도움이 됐던 관점은 이거였다. 눈에 보이는 모든 것은 결국 사각형 하나다. 버튼도 사각형, 레이블도 사각형, 이미지도 사각형이다. 이 사각형 하나하나가 UIView이고, 화면은 이 뷰들이 서로 겹치고 포개진 결과다.