NavigationLink 안에 Buttons 넣기

가위 / 바위 / 보 게임을 하는 간단한 앱을 만들었다.

사용자가 선택지들 중 하나를 선택하면, 결과 화면으로 이동하는 로직을 구현하고 싶었다.

하지만, NavigationLink 안에 Button을 넣으니 작동을 하지 않았다.

NavigationView {
	NavigationLink(destination: ResultView()){ 
                        Button{
                            rock()
                        } label: {
                            Image("rock")
                            .resizable()
                            .frame(width: 100, height: 100)
                        }
   
                        Button(action: {
                            scissor()
                        }) {
                            Image("scissor")
                            .resizable()
                            .frame(width: 100, height: 100)
                        }
                        
                        Button(action: {
                            paper()
                        }) {
                            Image("paper")
                            .resizable()
                            .frame(width: 100, height: 100)
                        }
                }

위의 코드는 버튼의 Action은 작동하지만, NavigationLink를 통한 View의 이동은 이루어지지 않았다.

아직 이유는 찾지 못하였지만, 해결 방안은 찾았다.

바로, NavigationLink의 attr 중 tag와 selection을 이용하는 것이다.

NavigationLink의 tag와 selection이 일치하면 link가 실행되도록 하는 것인데, 이에 대한 공부는 아직 부족한 상태이다.
그럼에도 앱의 기능을 정상적으로 구현하기 위해 다음과 같이 작성했다.

NavigationView {
    NavigationLink(
    destination: ResultView(result: go(rcp)), 
    tag: 1, 
    selection: $selection)
    
 (...)
 
 	Button{
       self.rcp = "rock"
       self.selection = 1
       } label: {
          Image("rock")
          .resizable()
          .frame(width: 100, height: 100)
                        }

처음에는 위와 같은 코드가 이해가 되지 않아, 각각의 버튼 마다 NavigationLink로 Button을 감쌌더니, 레이아웃이 뭉게졌다.
더 큰 범위의 NavigationView를 각각 두었더니, 해당 부분만 화면이 이동되었다.