SwiftUI를 이용한 간단한 뉴스 앱을 만들어보자.
뉴스의 내용은 Hacker News의 내용을 가져올 것이다.
H4X0 R News SwiftUI라는 이름으로 프로젝트를 생성해주자.
먼저 가져와줄 데이터를 받기 위해서 hacker new api문서를 참조하자.
우리는 뉴스 홈페이지에 있는 뉴스를 가져올 것이므로 다음 URL을 사용한다.
JSON의 구조에 따라 구조체를 만들어준다.
url 의url의 타입이 옵셔널인 이유는, url이 포함되어 있지 않은 글도 존재하기 때문이다. url의 값이 nil인데, JSON을 매칭 하려 하면 에러가 발생하기 때문에 꼭 옵셔널로 설정해주어야 한다.
JSON을 파싱 해서 뷰에서 사용할 수 있도록 해주는 NetworkManager 클래스를 만들었다.
뷰에서 저장된 데이터인 posts를 사용할 수 있도록 @Published 애노테이션을 사용하였다. fetchData() 메서드에서는, url에서 데이터를 받아와 JSON으로 디코딩시키고, 그 결과를 posts에 저장한다.
글을 테이블 뷰 형태로 보여주기 위해서 List를 사용하였고, List.navigationTitle을 사용하면 List에 이름을 붙여주고, Navigation으로 사용할 수 있다. 뉴스를 누르면 뷰를 이동시켜주기 위해서 NavigationLink를 사용해 줄 수 있다. destination에는 보여줄 뷰를 등록해 놓았다. 이후에 보겠지만 DetailView 구조체에 url을 초기화시켜주면 해당 url로 웹 뷰를 보여준다.
그리고 테이블 뷰의 각 셀에는 JSON에서 구조체로 파싱 된, 글의 번호와 글의 제목을 Horizontal stack으로 출력하였다.
onAppear는 뷰가 등장할 때 수행할 동작으로, JSON 데이터를 받아와야 하기 때문에, NetworkManager객체의 fetchData() 메서드를 실행해 준다.
구조체의 초반에 @ObservedObject 애노테이션은 해당 변수의 값이 변하게 되면, 실시간으로 내용을 반영해주기 위해서 사용한다.
DetailView에는 다음과 같이 웹 뷰를 보여주기 위한 코드가 작성되어 있다.
'iOS > SwiftUI' 카테고리의 다른 글
| SwiftUI에서 info.plist가 누락된 문제 (0) | 2022.03.07 |
|---|---|
| SwiftUI: @Binding 이란? (0) | 2022.03.07 |
| SwiftUI에서 커스텀 셀, 리스트 구현하기. (0) | 2022.03.07 |
| SwiftUI 날씨앱 UI 짜며 배운점(22.03.07) (0) | 2022.03.07 |
| SwiftUI: Basic (0) | 2022.01.23 |