[스파르타코딩클럽] 플러터(Flutter)로 시작하는 앱개발 종합반 - 2주차 개발일지 ②

4. 파일 분리

코드가 길어질수록 코드를 찾는 시간이 길어지기 때문에 파일을 분리(위젯들을 각각 다른 파일에 분리)

리팩토링(refectoring)

기능을 변경하거나 추가하지 않고, 코드만 관리하기 쉽게 변경하는 과정

 

* 복잡도가 올라갈수록 주기적인 리팩토링을 통해 복잡도를 낮춰줘야 한다.(협업에서 중요)

5. 좋아요 구현하기 & 피드 리스트 만들기

삼항연산자

조건이 true인 경우 반환값1이 할당되고, false인 경우 반환값2가 할당

조건 ? 반환값 1 : 반환값2

 

ListView 위젯

동일한 레이아웃에 다른 정보를 보여줄 때 사용하면 유용

ListView.builder(
  itemCount: 100, // 전체 아이템 개수
  itemBuilder: (context, index) { // index는 0 부터 99까지 증가
		return Text("$index"); // 100번 실행
  }
),

children을 직접 작성하거나 ListView.builder()로 itemCount만큼 반복

6. 피드마다 각각 다른 이미지 보여주기

class feed extends StatefulWidget {
  const feed({
    super.key,
    required this.imageUrl,
  });

  final String imageUrl; // 이미지를 담을 변수

  @override
  State<feed> createState() => _feedState();
}

required

필수 전달 매개 변수로 만들어진다.

this.imageUrl

많은 Feed 인스턴스 중 현재 인스턴스의 imageUrl

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  // 이미지
  child: Image.network(
    widget.imageUrl,
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

widget.변수명

StatefulWidget 상태 클래스에서 widget.변수명으로 전달받은 변수에 접근

View(뷰)

데이터를 보여주는 껍데기, view와 데이터를 분리하면 view를 재활용 할 수 있다.

 

당근마켓 만들기 완성!!