본문 바로가기

전체 글183

TextInput 컴포넌트에서 자주 사용하는 Props Propsvalue : 입력값을 설정 → value={name}onChangeText : 텍스트 변경 이벤트 처리 → onChangeText={setName}placeholder : 입력 전 안내 문구 → placeholder="안내 문구"placeholderTextColor : placeholder 색상 변경 → placeholderTextColor="gray"secureTextEntry : 비밀번호 입력 모드 → secureTextEntry={true}keyboardType : 키보드 타입 설정 → keyboardType"numeric"autoCapitalize : 자동 대문자 변환 설정 → autoCapitalize="none"multiline : 여러 줄 입력 허용 → multiline={tru.. 2026. 7. 9.
클래스형 컴포넌트, 함수형 컴포넌트 차이 클래스형 컴포넌트함수형 컴포넌트기본 구조ES6 class 문법 사용일반 자바스크립트 function 사용선언 방식class MyComponent extends React.Componentfunction MyComponent() or const MyComponent()state 관리this.state, this.setState() 사용useState Hook 사용LifecyclecomponentDidMount, componentDidUpdate 등 메서드 사용useEffect Hook으로 처리this 사용this 키워드 필요this 없음코드 길이상대적으로 길고 복잡더 간결성능 최적화 shouldComponentUpdate 등 사용React.memo, Hooks 사용현재 권장 방식과거 방식공식적으로 권장되는.. 2026. 3. 10.
로컬에 데이터 저장 AsyncStorage AsyncStorage는 리액트 네이티브에서 제공되는 비동기 키-값 저장소앱 내부에 데이터를 영구적으로 저장할 수 있음 -> 앱을 종료해도 데이터가 유지되는 로컬 저장소 설치expo install @react-native-async-storage/async-storageexpo install expo-app-loadingexpo install은 npm install과 거의 동일한 역할expo install은 사용 중인 Expo SDK 버전과 호환되는 버전인지 확인 후, 해당 버전의 라이브러리를 설치하는 과정 추가 기본 개념저장 단위: key-value값은 string만 저장 가능비동기 API (Promise 기반)플랫폼별 네이티브 저장소 사용Android : SQLiet 기반iOS : 파일 시스템 기반 .. 2026. 2. 22.
todo list 추가, 삭제, 수정 추가 const _addTask = () => { const ID = Date.now().toString(); const newTaskObject = { [ID]: { id: ID, text: newTask, completed: false}, }; setNewTask(""); setTask({ ...task, ...newTaskObject }) } 텍스트 입력 컴포넌트에서 확인 버튼을 누르면 _addTask 함수가 호출되어 기존 할일(task) 변수에 새로운 할일(newTaskObject)을 추가 삭제 const _deleteTask = id => { const currentTasks = Object.assign({}, task); delete c.. 2026. 2. 21.