[Flutter] 플러터 매개변수 Key 개념 정의

플러터에서는 매개변수 Key라는 개념이 있다. Key의 특징은 플러터의 위젯 레이아웃으로 배치가 되려면 계층화된 구성하게 되는데, 특정 위젯의 계층이 변경이 되더라도 그 값을 유지하면서 전달할 수 있다는 데 있다.

그렇다면 매개변수 Key는 언제 사용하는걸까?

1. 화면/라우트(route)에서 다른 화면/라우트(route)으로 단순히 데이터를 전달하고, 미래 시점에 화면 변경 요소가 발생할 수 있는 것에 대한 대비

예를 들어, 아래 그림을 예로 들어보면 왼쪽 화면은 TextField 2개(ID와 Password)가 Column의 자식 위젯으로 정의되어 있는 사례이다. (위젯의 레이아웃은 Column이나 Row의 자식 위젯으로 정의된다고 이전 포스팅에서 다루었다.)

이때 ID와 Pasword TextField에 입력된 값을 다음 화면/라우트(route)의 회원가입 페이지로 넘겨주는 시나리오가 있다고 가정해보자. (플러터는 화면을 라우트(route)의 개념으로 정의하고 있다.)

또한 해당 UI가 아래 그림의 오른쪽 화면과 같이 변경이 되면서 TextField의 위치가 Column의 자식 위젯에서 Row의 자식 위젯으로 변경이 되었다고 가정해보자.

이런 경우에 매개변수 Key의 활용은 일반적인 변수를 별도로 지정하여 처리하는 방식에 비해 코드와 처리를 단순히 할 수 있다.

참고로 플러터에서 서로 다른 화면/라우트(route)로 데이터를 보내고 받는 방식에는 여러가지가 있을 수 있다. 상황에 따라 매개변수인 Key를 이용할 수도 있고, 별도의 변수를 지정해서 값을 전달하고 받는 방식이 있을 수 있다고 이전 포스팅에서 설명하였다.

위의 상황에서처럼 현재 화면/라우트(route)에서 다음 화면/라우트(route)로 단순히 데이터를 넘겨주는 상황이 아니라 현재 화면/라우트(route)에서는 다음 화면으로 A라는 데이터를 넘겨주고, 다음 화면/라우트(route)으로 값을 전달한 후, 다음 화면/라우트(route)에서는 현재 화면/라우트(route)로 B라는 데이터를 넘겨주어 현재 화면/라우트(route)의 데이터를 업데이트 해야 되는 상황이라면 Key값에 의한 처리가 불가능하다. (해당 포스팅 참조)

예를 들어, 아래 그림과 같이 회원가입을 하는 과정에서 본인인증을 위해 인증코드를 받아서 인증을 하고 다시 원래 회원가입 페이지로 돌아와 이후 가입 절차에 따라 진행되는 프로세스가 이와 같은 대표적 케이스가 될 수 있겠다.

회원가입 화면/라우트(route)에서는 데이터 A(이름, 주민등록번호)를 본인인증 화면/라우트(route)로 전달하고, 본인인증 화면/라우트(route)에서는 데이터 B(인증성공여부 Flag)를 회원가입 화면/라우트(route)로 전달하는 경우에서처럼 서로 다른 데이터를 전달하고, 특정 데이터가 업데이트 되기를 대기하는 시나리오 상황에서는 매개변수 Key를 사용할 수 없다.

2. 동일 상태, 동일 위젯에서 데이터 셋을 재정렬하거나 수정하는 경우

미래의 특정 시점에 작업자의 의사결정에 따라 화면이 변경되는 상황은 아니지만 동일한 위젯 내에서 사용자 편집에 의하여 특정 데이터가 수정 변경되는 상황이 있을 수 있다.

아래와 같이 사용자에 의한 리스트 편집 시나리오는 애플리케이션 내에서 흔히 발생한다.

이때 화면/라우트(route) 간의 데이터 이동 및 업데이트는 일어나지만 동일 상태와 동일 위젯의 데이터 셋 내에서만 업데이트가 일어난다는 점에서 위의 설명했던 예외 상황과는 다르다는 점에 유의해야 한다.

이 외에 리스트 위젯에서의 스크롤의 위치를 기억했다가 원래 위치로 이동하는 등의 시나리오나 리스트 내 아이템의 순서를 사용자가 동적으로 변경할 수 있도록 처리하는 시나리오 등에서 매개변수 Key는 유용할 수 있다.