Dev./Flutter

[플러터 / Flutter] 초보 탈출 필수 코스: 안정적인 앱을 위한 제네릭(Generics) 활용법

Wonder Park 2026. 1. 13. 22:59
728x90

데이터의 마법: String Interpolation과 Collections 정복하기

점점 어려워지는 이유는 화면을 그리는 코드보다 데이터를 가공하고 전달하는 코드가 많아지기 때문입니다. UI가 '몸'이라면 데이터는 그 몸을 움직이는 '혈액'과 같습니다. 오늘은 Dart 언어의 강력한 데이터 처리 방식인 문자열 보간법과(이름이 왜 이래;;;) 컬렉션에 대해 아주 세세하게 파헤쳐 보겠습니다.


1. String Interpolation (문자열 보간법)

코드를 짜다 보면 "안녕하세요, 홍길동님!"처럼 문자열 중간에 변수를 넣어야 할 때가 많습니다.(누구누구님...개인화) 예전에는 + 기호를 써서 복잡하게 연결했지만, Dart에서는 $ 기호 하나로 해결합니다.

💬 개념 비유: 빈칸 채우기 (Mad Libs)

미리 준비된 문장 중간에 구멍을 뚫어놓고, 필요한 데이터를 실시간으로 끼워 넣는 방식입니다. 따옴표를 여러 번 여닫을 필요가 없어 코드가 훨씬 짧아지고 읽기 쉬워집니다.

문법 규칙

  • 단일 변수: $name 처럼 변수명 앞에 $를 붙입니다.
  • 복잡한 표현식: ${age + 1} 처럼 중괄호 안에 계산식이나 함수 호출을 넣습니다.

2. Collections: 데이터를 관리하는 세 가지 그릇

데이터가 여러 개일 때 이를 묶어서 관리하는 세 가지 방법을 '컬렉션'이라고 합니다. Python 자료형과 비슷한 것 같습니다.

① List (리스트)

순서가 있고 중복을 허용합니다. (가장 많이 쓰임)

비유: 편의점의 진열대 (1번 칸, 2번 칸... 순서가 중요함)

② Set (셋)

중복을 허용하지 않는 유일한 값들의 모임입니다.

비유: 로또 당첨 번호 (중복이 없고 어떤 번호가 들어있는지가 중요함)

③ Map (맵)

이름(Key)과 실제 데이터(Value)가 짝을 이룹니다.

비유: 전화번호부 (이름을 찾으면 번호가 나옴)

3. Generics: 내용물을 미리 약속하기

제네릭(Generics)은 컬렉션 안에 어떤 종류의 데이터를 담을지 미리 라벨링 하는 것입니다. <Type> 형식을 사용합니다. 자료형 타입을 알려줘야 한다는 내용이네요.

Why?: 실수로 사과 상자에 배를 넣는 사고를 방지합니다. 코드를 작성할 때 에러를 미리 잡아주어 앱이 실행 중에 멈추는 것을 막아줍니다.
List<String> names = ['철수', '영희']; // 문자열만 들어올 수 있음!

4. 실전 코드: 데이터 리스트 화면에 출력하기

가장 흔하게 쓰이는 "Map을 담은 List" 구조입니다.

// 1. 실무에서 가장 많이 쓰는 데이터 구조
final List<Map<String, String>> users = [
  {"name": "철수", "role": "개발자"},
  {"name": "영희", "role": "디자이너"},
];

// 2. UI 구성
ListView.builder(
  itemCount: users.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('${index + 1}')),
      title: Text('이름: ${users[index]["name"]}'), // 문자열 보간법 활용
      subtitle: Text('역할: ${users[index]["role"]}'),
    );
  },
)
        
⚠️ 주의: 안티 패턴 'Dynamic'
List myList = [] 처럼 타입을 생략하면 List<dynamic>이 되어 아무 데이터나 다 들어갑니다. 이는 나중에 "이게 문자열인가 숫자인가?" 헷갈리게 하여 런타임 에러의 주범이 됩니다. 항상 구체적인 타입을 명시하세요!

💡 퀴즈 (Check-point)

Q. 다음과 같은 코드가 있을 때 출력 결과는 무엇일까요?
int age = 20; print("내년에는 ${age + 1}살이 됩니다.");

(정답: "내년에는 21살이 됩니다."입니다! ${ } 내부의 연산이 먼저 수행된 후 문자열로 합쳐지기 때문이죠.)

728x90