... 연산자 활용하여 List 에 요소를 추가하는 방법(feat. children [] )

혁진·2023년 8월 24일
0

문제사항

  if (textField == true)
                Column(
                  children: tileItmeList ?? [],
                  // childern 에 Textfield 위젯을 추가로 넣어줘
                ),
              if (textField == false)
                Column(
                  children: tileItmeList ?? [],
                  
                ),

textField 가 true 라면 column의 children 에 요소를 추가하는 기능을 구현하고 싶었다.
그래서 if () 문을 통해 column 의 위젯을 두개로 만들어 추가한 column 과 비추가한 column 으로 작성했다.

하지만 이것은 너무나도 비효율적이라고 생각하여 다른 방법이 없는지 찾아보았다.

문제
조건문을 통해 case 별로 위젯을 따로따로 만들면 코드가 불분명해지고 효율적이지 않다. 즉 조건을 만족하면 chilren 의 요소를 추가하는 방법을 사용하고 싶었다. ->조건을 만족하면 요소가 추가되는 방법은 없을까?

해결 방법

List 의 요소를 분리하여 반환해주는 ... 연산자

...연산자를 사용하여 요소를 분리하고 추가하는 방식으로 하면 문제가 해결될 것이라고 생각했다.

Column(
      children: [
        ...tileItmeList ?? [],
        if (textField) TextField(),
      ],

이 코드를 조금 더 자세히 설명해보자면

먼저 Column 위젯은 자식 위젯들을 수직 방향으로 배치할 때 사용합니다. 이 경우에는 Column 위젯의 자식 위젯들을 children 속성에 리스트로 전달하고 있습니다.

children 속성의 리스트 구성을 살펴보면 다음과 같습니다:

  1. ...tileItmeList ?? []: tileItmeListnull이 아니라면 해당 리스트의 아이템을 포함합니다. Spread 연산자 ... 를 사용하면 리스트의 요소들을 원래 리스트의 구조를 유지하며 개별 요소로 확장할 수 있습니다. 만약 tileItmeListnull이라면 빈 리스트 []로 작동합니다.

  2. if (textField) TextField(): textFieldtrue인 경우, TextField 위젯을 추가합니다. 만약 textFieldfalse라면 이 조건문은 무시되고 TextField 위젯은 추가되지 않습니다.

결론적으로, 이 Column 위젯은 tileItmeList의 요소들을 수직 방향으로 배치하며, 만약 textField 변수가 참이라면 TextField 위젯이 추가되어 함께 배치됩니다. 이렇게 구성된 Column 위젯은 동적으로 자식 위젯의 목록을 변경할 수 있게 한다는 장점이 있습니다.

알게된 점

알게된 점

  1. ...연산자를 통해 list 의 요소들을 추가할 수 있다.
children [
...[List] ,
+(새로운 요소)
]
  1. children 안에서도 if(조건문) 위젯로 list 의 요소를 추가할 수 있다.
 children [
if(조건문) 위젯 
]

> 참고

Spread operator (... 또는 ...?) : 이러한 연산자를 사용하여 컬렉션의 요소를 전개할 수 있습니다. 만약 컬렉션이 null일 수 있는 경우에는 ...?를 사용합니다.
예시:

List list1 = [1, 2, 3];
List list2 = [4, 5, 6];
List combinedList = [...list1, ...list2]; // 출력 결과: [1, 2, 3, 4, 5, 6]

List list3;
List list4 = [7, 8, 9, ...?list3]; // list3이 null이므로 출력 결과: [7, 8, 9]

profile
긍정적으로 살래요

0개의 댓글