import {StatusBar, Dimensions} from 'react-native';
import React, {useState} from 'react';
import {Text, View, LogBox} from 'react-native';
import styled, {ThemeProvider} from 'styled-components/native';
import {theme} from './src/theme';
import Input from './src/input';
import Task from './src/Task';
const Container = styled.SafeAreaView`
flex: 1;
background-color: ${({theme}) => theme.background};
align-items: center;
justify-content: flex-start;
padding: 30px;
`;
const Title = styled.Text`
font-size: 30px;
font-weight: 600;
color: ${({theme}) => theme.main};
width: 100%;
align-items: flex-end;
padding: 0 20px;
`;
// 목록의 스크롤바를 스타일링
const List = styled.ScrollView`
flex: 1;
width: ${({width}) => width - 40}px; //목록화면의 좌우마진을 20으로 줌
`;
LogBox.ignoreLogs(['Remote debugger']);
export default function App() {
const width = Dimensions.get('window').width;
const tempData = {
// Task list
1: {id: '1', text: '리액트네이티브', completed: false},
2: {id: '2', text: 'Expo', completed: true},
3: {id: '3', text: '자바', completed: false},
};
const [tasks, setTasks] = useState(tempData);
const [newTask, setNewTask] = useState('');
// Task 목록추가하기
const addTask = () => {
if (newTask.length < 1) {
// 공백인 자료입력시 추가가 않되게 함
return;
}
const ID = Date.now().toString(); // 현재시간의 타임스탬프
const newTaskObject = {
[ID]: {id: ID, text: newTask, completed: false},
};
// alert(newTaskObject);
setNewTask('');
setTasks({...tasks, ...newTaskObject});
};
// 선택된 Task 삭제
const deleteTask = (id) => {
console.log(id);
// 현재 Task항목들의 객체와 동일한 변수를 생성
const currentTasks = Object.assign({}, tasks);
// 해당되는 값을 가진 항목만 삭제
delete currentTasks[id];
// 선택된 항목만 삭제된 객체를 currentTask 에 대입ㄴ
setTasks({currentTasks});
};
return (
<ThemeProvider theme={theme}>
<Container>
<Title>To Do List</Title>
<StatusBar
barStyle="light-content"
backgroundColor={theme.background}
/>
<Input
placeholder="작업추가하기"
value={newTask}
onChangeText={(text) => setNewTask(text)}
onSubmitEditing={addTask}
/>
<List width={width}>
{Object.values(tasks)
.reverse()
.map((item) => (
<Task
key={item.id}
item={item}
deleteTask={deleteTask}
/>
))}
{/* reverse().map >>> 최근입력자료가 먼저나오게 함 */}
</List>
</Container>
</ThemeProvider>
);
}
import React from 'react';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import IconButton from '../components/iconButton';
import {icons} from '../components/icons';
import {Text} from 'react-native';
import Input from './input';
const Container = styled.View`
flex-direction: row;
align-items: center;
background-color: ${({theme}) => theme.itemBackGround};
border-radius: 10px;
padding: 5px;
margin: 3px 0;
`;
const Contents = styled.Text`
flex: 1;
font-size: 16px;
color: ${({theme}) => theme.text};
`;
const Task = ({item, deleteTask}) => {
return (
<Container>
<IconButton icon={icons.uncheck} />
<Contents>{item.text}</Contents>
<IconButton icon={icons.edit} />
<IconButton
icon={icons.delete}
item={item}
onPress={deleteTask}
/>
</Container>
);
};
Task.propTypes = {
item: PropTypes.object.isRequired,
deleteTask: PropTypes.func.isRequired,
};
export default Task;
IconButton.js
import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import {icons} from './icons';
const Icon = styled.Image`
width: 30px;
height: 30px;
margin: 10px;
tint-color: ${({theme}) => theme.text};
`;
const IconButton = ({icon, onPress, item}) => {
const _onPress = () => {
onPress(item.id);
};
return (
<TouchableOpacity onPress={_onPress}>
<View>
<Icon source={icon} />
</View>
</TouchableOpacity>
);
};
IconButton.propTypes = {
icon: PropTypes.oneOf(Object.values(icons)).isRequired,
onPress: PropTypes.func,
item: PropTypes.object,
};
export default IconButton;
안녕하세요,
깃헙에 작업중인 파일을 올릴때, 폴더까지 함께 커밋해 주셔야 합니다.
간단하게, 프로젝트 전체를 커밋해 주시면 됩니다. (단, node_modules는 제외)
그래야 제가 shafeel2님의 레포를 받아서 그대로 실행할 수 있습니다.
아래 링크처럼 설정 파일과 폴더 까지 모두 커밋 해주셔야 합니다.
https://github.com/Alchemist85K/inflearn-react-native/tree/main/rn-todo-app
자세한 설명은 빼고, 간단하게 설명하면,
1. 깃헙에서 레포 생성
- 생성할 프로젝트 이름과 동일하게 하는것을 권장합니다.
- 프로젝트 이름과 깃헙 레포 이름이 달라도 문제가 되진 않지만, 되도록 같은 이름으로 유지하는것을 권장합니다.
2. expo 프로젝트 생성 및 프로젝트 디렉토리로 이동
- 1번에서 생성한 깃헙 레포 이름과 동일한 이름으로 프로젝트 생성
- expo init <프로젝트 이름>
- cd <프로젝트 이름>
3. expo 프로젝트에 깃헙 레포 연결
- git remote add origin <깃헙 레포 주소>
- ex) git remote add origin git@github.com:Alchemist85K/inflearn-react-native.git
- ex) git remote add origin https://github.com/Alchemist85K/inflearn-react-native.git
4. 브랜치 이름 변경 및 푸시
- git branch -M main
- 필수는 아닙니다.
- git push -u origin main
위의 과정을 진행하면, 생성된 expo 프로젝트 전체가 해당 레포에 푸시됩니다.
이 외에도 코드 관리와 관련되어 많은 내용들이 있지만,
이 강의는 깃헙 강의가 아닐뿐더러, 양도 많아서 텍스트로 설명하기 어려운점 이해해 주시기 바랍니다.
커맨드라인으로 진행하는것을 선호하지 않으면,
깃헙에서 나온 GitHub Desktop을 다운로드 받아 이용하시는것도 괜찮고, (https://desktop.github.com/)
소스트리(https://www.sourcetreeapp.com/)나 GitKraken(https://www.gitkraken.com/)도 괜찮습니다.
모두 많은 사람들이 이용하는만큼 직관적인 UI와 다양한 기능을 제공하니 사용해 보시고 가장 마음에 드는 툴을 이용하는것도 좋은 방법입니다.
즐거운 하루 되세요
감사합니다.