[SwiftUI] NavigationView와 NavigationStack 사용해보기

오늘은 화면 이동에서 정말 중요한 Navigation에 대해 알아보자!👩🏻‍🍳

참고로 NavigationView는 Deprecated 되었기에 그 대신 NavigationStack을 학습해보기로!

---

 

NavigationStack

NavigationStack은 화면 전환을 담당하며, 주로 우리가 DetailView로 이동할 때 자주 사용하게 된다. 기존의 NavigationView에 비하면 데이터 전달이나 데이터 기반에 가깝기에 더 원활한 통신이 이루어질 것 같다.

 

NavigationStack Apple 공식 문서

NavigationStack | Apple Developer Documentation

 

NavigationStack {
    List(parks) { park in
        NavigationLink(park.name, value: park)
    }
    .navigationDestination(for: Park.self) { park in
        ParkDetails(park: park)
    }
}

 

---

새로운 NavigationLink

기존의 NavigationLink도 잘 작동을 하는데 새로운 NavigationLink는 데이터 값에 따른 링크 연결을 생성해준다.

navigationDestination이라는 모디파이어로 데이터를 보낼 수 있다.

 

NavigationLink Apple 공식 문서

NavigationLink | Apple Developer Documentation

 

NavigationStack {
    List {
        NavigationLink("Mint", value: Color.mint)
        NavigationLink("Pink", value: Color.pink)
        NavigationLink("Teal", value: Color.teal)
    }
    .navigationDestination(for: Color.self) { color in
        ColorDetail(color: color)
    }
    .navigationTitle("Colors")
}

 

---

NavigationBar

NavigationBar는 화면 상단에 위치하며, 화면의 제목을 표시하거나 추가적인 액션을 제공하는 컴포넌트이다.

NavigationBar에는 여러 요소들로 구성된다.

• .navigationTitle("Title") : 화면의 제목을 표시한다. navigationTitle 모디파이어를 사용하여 설정할 수 있다.
• .navigationBarItems(leading: , trailing: )
  • leading : 화면의 왼쪽 상단에 위치하는 아이템이다. 보통 기본적으로 생성되는게 back 버튼이지만, 필요에 따라서 다른 버튼을 추가할 수 있다.
  • trailing : 화면의 오른쪽 상단에 위치하는 아이템이다. 주로 편집이나 액션 버튼을 배치한다.
• .navigationBarBackButtonHidden(true/false) : 뒤로 가기 버튼을 보이지 않게 한다.

---

오늘의 코드 레시피👩🏻‍🍳 완료!🩷