[RN 3-3 프로젝트 개발 2]

6. TodoListView 컴포넌트

 

src/Screens/Todo/TodoListView/

index.tsx

 

import React from 'react';
import Styled from 'styled-components/native';

import Header from './Header';
import TodoList from './TodoList';

const Container = Styled.SafeAreaView`
  flex: 1;
`;

interface Props {}

const TodoListView = ({  }: Props) => {
  return (
    <Container>
      <Header />
      <TodoList />
    </Container>
  );
};
export default TodoListView;

 

---

7) Header 컴포넌트

src/Screens/Todo/TodoListView/Header/

index.tsx

 

import React from 'react';
import Styled from 'styled-components/native';

const Container = Styled.View`
  height: 40px;
  justify-content: center;
  align-items: center;
`;
const TitleLabel = Styled.Text`
  font-size: 24px;
  font-weight: bold;
`;

interface Props {}

const Header = ({  }: Props) => {
  return (
    <Container>
      <TitleLabel>Todo List App</TitleLabel>
    </Container>
  );
};
export default Header;

 

---

 

8) Context 데이터를 사용하는 TodoList 컴포넌트

src/Screens/Todo/TodoListView/TodoList/

index.tsx

 

import React, { useContext } from 'react';
import { FlatList } from 'react-native';
import Styled from 'styled-components/native';

import { TodoListContext } from '~/Context/TodoListContext';

import EmptyItem from './EmptyItem';
import TodoItem from './TodoItem';

const Container = Styled(FlatList)`
`;
interface Props {}

const TodoList = ({  }: Props) => {
  const { todoList, removeTodoList } = useContext<ITodoListContext>(
    TodoListContext
  );
  return (
    <Container
      data={todoList}
      keyExtractor={(item, index) => {
        return `todo-${index}`;
      }}
      ListEmptyComponent={<EmptyItem />}
      renderItem={({ item, index }) => (
        <TodoItem
          text={item as string}
          onDelete={() => removeTodoList(index)}
        />
      )}
      contentContainerStyle={todoList.length === 0 && { flex: 1 }}
    />
  );
};
export default TodoList;

 

---

 

9) TodoList의 EmptyItem 컴포넌트

src/Screens/Todo/TodoListView/TodoList/EmptyItem/

index.tsx

 

import React from 'react';
import Styled from 'styled-components/native';

const Container = Styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
`;
const Label = Styled.Text``;
interface Props {}

const EmptyItem = ({  }: Props) => {
  return (
    <Container>
      <Label>하단에 "+" 버튼을 눌러 새로운 할일을 등록해 보세요.</Label>
    </Container>
  );
};
export default EmptyItem;

 

---

10) TodoItem 컴포넌트

src/Screens/Todo/TodoListView/TodoList/TodoItem/

index.tsx

 

import React from 'react';
import Styled from 'styled-components/native';

const Container = Styled.View`
  flex-direction: row;
  background-color: #FFF;
  margin:4px 16px;
  padding: 8px 16px;
  border-radius: 8px;
  align-items: center;
`;
const Label = Styled.Text`
  flex: 1;
`;
const DeleteButton = Styled.TouchableOpacity``;
const Icon = Styled.Image`
  width: 24px;
  height: 24px;
`;

interface Props {
  text: string;
  onDelete: () => void;
}

const TodoItem = ({ text, onDelete }: Props) => {
  return (
    <Container>
      <Label>{text}</Label>
      <DeleteButton onPress={onDelete}>
        <Icon source={require('~/Assets/Images/remove.png')} />
      </DeleteButton>
    </Container>
  );
};
export default TodoItem;