JSJH의 블로그

[5주차] 플래시카드 화면 이동 (Navigation)학습용 플래시카드로 페이지 화면을 전환하는 기능을 붙입니다.오늘의 목표하단의 학습 시작 버튼을 누르면 플래시카드가 있는 화면으로 분기되어 넘어갑니다.넘어간 화면의 플래시카드를 누르면 단어의 뜻이 보입니다.돌아가기 버튼을 누르면 다시 메인 단어 리스트로 복귀합니다.1. 5주차 클래스 파일 만들기왼쪽 트리에서 ui 패키지 폴더 우클릭 ➜ New -> Kotlin Class/File 클릭.이름 칸에 StudyScreen 입력 후 엔터 ➜ 맨 밑에 있는 5주차 완성 하단 코드 - [C] StudyScreen.kt 긁어서 통째로 복붙.2. 5주차 화면 이동 네비게이션 연결ui 패키지 안의 기존 HomeScreen.kt 파일 열기.5주차 완성 하단 코드 - [B..

[3주차] 리스트 스크롤 만들기이번 주는 앱 화면에 단어 여러 개를 세로로 정렬하고 버튼을 작동시키는 주차입니다.오늘의 목표아래로 쭉 스크롤되는 리스트가 나옵니다.정렬 버튼으로 리스트 순서를 바꿀 수 있습니다.눈 모양 버튼 누르면 단어 뜻이 ●●●●●로 변합니다. 다시 누르면 보입니다.휴지통 누르면 지워집니다.1. 3주차 데이터 창고 파일 만들기왼쪽 폴더 트리에서 data 폴더 우클릭 ➜ New -> Kotlin Class/File 클릭.이름 칸에 WordRepository 입력 후 엔터 ➜ 3주차 준비 코드 - WordRepository.kt 전체 복붙 (데이터를 저장소에 읽고 쓰는 데이터 창고입니다).MainActivity.kt 파일을 열기.super.onCreate(savedInstanceState..

[Android] Ch2-5. Material Design 31. 개요 및 기본 형식@Composablefun MyApp() { MaterialTheme { // Material Design 3 테마 스코프 최상위 적용 // 해당 스코프 내부에 선언된 모든 UI 컴포넌트들은 테마 설정과 규약을 상속받습니다. Surface { // 커스텀 UI 컴포넌트 구현부 } }}Google의 모바일 시스템 코어 디자인 가이드라인인 Material Design 버전 3를 일컫습니다.MaterialTheme 스코프 내부에서는 정의된 색상표 상속, 공용 타이포그래피(폰트 계층), 일반 요소들의 도형 외곽 가이드라인이 자동 렌더링에 반영되어 체계화됩니다...

[Android] Ch2-4. remember vs rememberSaveable1. 개요 및 기본 형식@Composablefun RememberExample() { // remember: 통상적인 Recomposition 시에만 값 유지 var count1 by remember { mutableStateOf(0) } // rememberSaveable: 화면 회전, 시스템에 의한 제약 프로세스 재시작 시에도 유지 var count2 by rememberSaveable { mutableStateOf(0) }}두 함수 모두 Recomposition 과정에서 UI State 손실을 방지합니다.rememberSaveable의 경우 Bundle 복원 매커니즘을 지원하여, Activity 재..

[Android] Ch2-3. 상태 호이스팅 (State Hoisting)1. 개요 및 기본 형식// 상태를 위로 끌어올림@Composablefun ParentComposable() { var text by remember { mutableStateOf("") } // 부모가 State 소유 // State와 변경 함수를 자식에게 전달 ChildComposable( text = text, // 현재 값 전달 onTextChange = { newText -> text = newText } // 변경 방법 전달 )}@Composablefun ChildComposable( text: String, // State 값만 받음 (읽기 전용) onTe..

[Android] Ch2-2. TextField1. 개요 및 기본 형식@Composablefun TextInputExample() { var text by remember { mutableStateOf("") } // 입력 텍스트 State TextField( value = text, // 현재 노출될 값 onValueChange = { newText -> // 입력 변경 감지 시 동작 text = newText // 상위 State 필드 업데이트 } )}사용자로부터 텍스트 입력을 수신하는 Composable입니다.value와 onValueChange 파라미터는 UI 동기화를 위한 필수 요소입니다.반드시 State 객체와 연..

[Android] Ch2-1. LazyColumn & LazyRow1. 개요 및 기본 형식@Composablefun ListExample() { LazyColumn { // 수직 스크롤 리스트 items(10) { index -> // 10개 항목 생성 Text("항목 $index") } } LazyRow { // 수평 스크롤 리스트 items(10) { index -> Text("항목 $index") } }}스크롤이 가능한 리스트 UI를 생성하는 Composable 함수입니다.Lazy 속성에 의해 현재 화면에 노출되는 항목(Item)만 렌더링되므로, 메모리 및 성능 최적화에 유리합니다.L..

[Android] Ch1-5. 이벤트 처리1. 이벤트 처리 개요1) 기본 형식@Composablefun EventExample() { Button( onClick = { // 람다 구문: 클릭 발생 시 실행할 동작 지정 // 버튼 클릭 시 수행할 코드 구조 } ) { Text("클릭") }}사용자와 애플리케이션 간의 상호작용(터치스크린 이벤트, 키보드 입력 등)을 처리하기 위한 메커니즘입니다.이벤트가 발생했을 때 수행되어야 하는 콜백 함수는 코틀린의 고차 함수와 람다 조합으로 간결하게 정의됩니다.2. 주요 컴포넌트 이벤트 구조1) Button 클릭 (onClick)가장 보편적인 버튼 인터랙션 리스너입니다.onClick: 사용자가 ..

[Android] Ch1-4. State & Recomposition1. 개요1) 기본 형식@Composablefun StateExample() { // remember로 상태 유지, mutableStateOf로 변경 가능한 상태 생성 var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { // count 변경 시 자동 Recomposition 발생 Text("클릭 횟수: $count") }}State (상태): UI에 표시되는 갱신 가능한 데이터를 의미합니다.Recomposition (재구성): 참조 중인 State 값이 변경될 때, UI 구조가 자동으로 다시 렌더링(업데이트)되는 과정을..

[Android] Ch1-3. Modifier1. Modifier 개요1) 기본 형식@Composablefun ModifierExample() { Text( text = "Hello", modifier = Modifier // Builder 패턴 체이닝 구성 .size(100.dp) // 1. 크기 고정할당 .padding(16.dp) // 2. 외부 여백 할당 .background(Color.Blue) // 3. 배경색 적용 )}Composable 컴포넌트의 크기, 형태 수정, 클릭 이벤트 감지 등의 동작을 정의하는 제어 객체입니다.메서드 체이닝 방식을 차용하여 다수의 modifier 속성을 연계하여 ..