돌아오신 것을 환영합니다
이번 강의에서 우리는 Compose를 이용해서 드디어 탐색을 설정하겠습니다
공식 문서를 다시 한 번 보면 좋은 시간인데 여기에서 Compose를
이용한 탐색을 하는 방법이 잘 나와있습니다
상당히 좋은 문서입니다
Kotlin 코드도 볼수 있습니다
처음으로 해야 하는 것은 종속 항목에 implementation을 사용하는 것입니다
그러므로 이를 build.gradle파일에 추가해야 하는데 app module의 build.gradle파일입니다
좋습니다
이제 해보겠습니다
이 부분을 복사하고
이 부분만 복사해서 프로젝트로 갑니다
gradle module에서 dependencies를 찾을 수 있습니다
여기에 종속 항목을 추가할 수 있습니다
nav_version은 현재 버전인 2.7.4이고
navigation-compose가 있는 implementation을 추가합니다
이 강의와 동일한 버전을 사용하시는 것을 추천합니다
이 곳에 표시되는 버전 말고 말입니다 시간이 지나면 버전이 바뀔 텐데 우리가 지금까지 빌드한 것이 잠재적으로
망가질 수 있기 때문입니다
가끔 그런 일이 발생합니다
그러므로 저와 동일한 버전을 사용하시기를 바랍니다
이제 navController가 필요합니다
해 보겠습니다
그렇게 하기 위해 이동하는데 우선 이 파일부터 동기화 합니다
이 Gradle 프로젝트 파일 말입니다
그렇지 않으면 탐색이 선택 가능한 옵션으로 나타나지 않기 때문입니다
동기화까지 잠시 시간이 걸립니다
완료되면 해 보겠습니다 왜냐하면 Gradle 동기화 중에 코드를 수정해서
무언가 망가지는 상황은 원치 않기 때문입니다 그럴 것
같지 않지만 그렇게 될 수 있고
그러면 갑자기 애플리케이션이 제대로 동작하지 않을 것입니다
그러므로 잠시 기다리겠습니다
좋습니다
거의 1분은 걸린 것 같습니다
제 경우에는 여러분 보다 오래 걸릴 수 있습니다
인터넷 속도나 컴퓨터 속도 등에 따라 다릅니다
MainActivy로 가서 새 컴포저블을 설정하는데
@Composable을 입력하고
fun myApp이라고 하고
대문자 M으로 바꾸겠습니다
이 MyApp안에서 방금 본 navController를 설정해
보겠습니다
여기 이 navController = So this one here, the nav controller.
rememberNavController()입니다
NavController는 탐색 컴포넌트의 중심 API입니다
이는 상태 유지적이고 앱의 화면을 만드는 컴포저블의 백 스택의 스택과 각 화면의
상태를 유지합니다
백 스택이 무엇일까요
백 스택은 기본적으로 새 화면을 열고 스마트폰의 뒤로 가기 버튼을
누르면 현재 화면으로 오게 했던 이전 화면으로 돌아가는데
이렇게 되는 것은 기본적으로 쌓이기 때문입니다
1번 화면에서 2번 화면 그리고 3번 화면으로 이동한 뒤 뒤로 가기 버튼을 누르면
3번 화면에서 2번 화면으로 이동합니다
사용된 화면을 사용된 순서로 저장해서
뒤로 가기 버튼을 누르면 올바른 화면으로 돌아가게 합니다 왜냐하면 뒤로 돌아가려 하는데
다른 화면으로 이동하면 익숙한 동작이 아니므로 혼란스러울 것이기
때문입니다
좋습니다
이 것이 백 스택이 하는 일입니다
rememberNavController가 있으니
이제 NavHost를 설정해야 하는데
NavHost는 NavController가 필요합니다
그러므로 NavController를 설정했습니다
그리고 이 NavController를 NavHost에 전달할 수 있는데
startDestination을 정의해야 합니다
이는 어떤 컴포저블이
즉 어느 화면이 시작 화면인가 입니다
이를 정의해야 합니다
그러고 나서 개별 화면인 다른 컴포저블을 여기에
정의해야 합니다
좋습니다
이제 앱애서 해보겠습니다
제 fun MyApp에 navController를 설정하고 상태 유지적으로 rememberNavController를
import합니다
이 함수를 import하고 NavHost를 설정합니다
NavHost()인데
보신 것처럼 NavController를 넘겨줘야 하는데
NavHost를 import하겠습니다
이 @Composable NavHost입니다
navController = navController라고 합니다
이는 navController매개 변수로 설정한 것이 우리의 navController라는 것을
확실하게 하기 위한 방법입니다
그리고 startDestination을 설정해야 합니다
firstscreen이라고 하겠습니다
firstscreen인데
자동적으로 이 FirstScreen 컴포저블을 의미한다고 생각하실 수 있겠지만 보시는 것처럼
FirstScreen이라는 다름 이름을 갖고 있습니다
그러므로 이 세부 설정을 정의해야 합니다
이 컴포저블들을 설정하겠습니다
보시는 것처럼 composable은 route(경로)와 필요할 경우 인수들을 갖는 것을
제공합니다
이 것으로 해보겠습니다
경로로 시작하는데 firstscreen이고
경로를 갖는 다른 컴포저블을 설정하는데 이는
secondscreen입니다
이제 두 곳에 모두 중괄호를 추가해야 하며
그렇지 않으면 충돌이 납니다
여기에서 더 설정할 수 있는데
보시는 것처럼 경로를 두 개의 다른 방법으로 설정했습니다
아무 방법이나 괜찮습니다
여기서 route 속성을 특정해서 정의하고 있기
때문에
매개 변수를 하나만 전달하면 자동적으로 첫 번째 매개 변수인
route라는 것을 파악합니다
composable 함수는 다른 매개 변수들을 이용하여 compose 화면을 설정하는 데
하나는 우리가 사용하는 것처럼 route의 이름이고
다른 하나는 컴포저블 그 자체입니다
route는 앱 어디에서든 화면을 식별하는데 사용할 수 있습니다 host의 startDestination을 설정한 것처럼 말입니다
다른 화면이 각각의 컴포저블에 속한다고 하기 전에 각 화면의
버튼 동작부터 정의하겠습니다
그러려면 FristScreen으로 가서
버튼을 이용해서 한 화면에서 다른 화면으로 이동하려면 두 가지가 필요합니다
우리가 실행할 코드나 함수를 전달하는 것이고
이 경우 저는 익명 함수 또는 Lambda(람다)를 사용하겠습니다
navigationToSecondScreen은 매개 변수가 필요 없고 아무것도 리턴하지 않는 형태의
실행을 원하는 코드가 되어야 합니다
이 전에 본 적 있습니다
FirstScreen이 호출되었을 때 실행될 코드를 넘겨주는 것입니다
함수를 넘기거나 실행할 코드를 넘길 수 있는데 입력 값도 출력 값도
없어야 합니다
그저 코드만 실행할 것입니다
이제 이 함수를 호출해야 합니다
Button의 onClick안에서 navigationToSecondScreen을 호출합니다
이제 이를 통해 두 번째 화면으로 이동하는데
첫 화면 Preview에 작은 문제가 있습니다
FirstPreview안의 FirstScreen을 지우겠습니다
왜냐하면 FirstScreen이 일어나면 이 곳에 실행될 어떠한 코드도 넘기지 않습니다
정확히는 아무 것도 이 곳에서 실행되어선 안됩니다
좋습니다 여기까지 했고
미리 보기에서 빌드한 뒤 새로 고침하면 여전히 FirstPreview를 볼 수
있을 것입니다
다시 하면
네 볼 수 있습니다
좋습니다
이제 SecondScreen에도 동일하게 합니다
좋습니다
SecondScreen.kt로 이동해서 navigateToFirstScreen이라고 하고 매개 변수는 없고
리턴 값도 없습니다
이제 onClick 안에서 이 함수를 호출합니다
Preview에서도 아무 일도 하지 않도록 합니다
기본적으로 어떤 코드도 넘기지 않습니다
좋습니다
MainActivity의 MyApp의 navController에서
탐색을 담당합니다
이제 이 firstscreen을 경로로 하는 컴포저블이 실행될 때 무슨 일이 일어나야 하는 지를
정할 수 있습니다
이 곳에서 FirstScreen을 사용하는데
전달해야 할 코드는 navController.navigate이며
탐색할 경로를 지정해야 하는데
secondscreen이라는 경로로 탐색하겠습니다
여기 이 route로 말입니다
이는 큰 따옴표 안에 있어야 하고
이제 한 화면에서 다른 화면으로 탐색할 수 있습니다
첫 화면에서 두 번째 화면으로 말입니다
이제 빠르게 테스트 해보겠습니다 MainActivity의 Oncreate로 가서
Surface에 MyApp을 사용합니다 이 컴포저블인데 다른 컴포저블을 담고 있는
NavHost를 담고 있습니다
FirstScreen과 SecondScreen을 말입니다
여기에서 FirstScreen을 사용할 필요는 없습니다
NavHost컴포저블을, NavController를 갖고 있는 NavHost를 사용하는데
애플리케이션의 전체 탐색 구조를 담당합니다
이제 실행하면 화면이 보입니다
첫 화면입니다
이 버튼을 누르면
두 번째 화면으로 이동했는데
두 번째 화면에서 무슨 일이 일어날 지 구현하지 않았는데 여기에서 해야
합니다
즉 first 대신 second로 동일한 일을 해야 합니다
오류가 발생한 이유는 SecondScreen의 이 곳에 무언가를 넘겨주어야 하는데
그렇지 않았기 때문입니다
실행할 코드를 넘기지 않았었는데
이 곳에서 했습니다
이제 애플리케이션을 다시 실행합니다
그러면 두 번째 화면에서 첫 화면으로 이동할 수 있을 것이며
이 것이 우리의 목표입니다
두 번째 화면으로 가서
두 번째 화면이라는 글씨가 보입니다
환영한다고 말입니다
이제 첫 화면으로 가면
첫 화면으로 돌아왔습니다
이제 보시는 것처럼 두 화면을 쉽게 이동할 수 있습니다
그러나 아직 이 곳에 입력하는 정보를 넘기지 않았는데 다음 강의에서
하겠습니다
이번 강의의 탐색은 여기까지 입니다
다음 강의에서 뵙겠습니다