[React Native] Todo 앱 - Context & AsyncStorage_2편

들어가며.

Todo 앱 - Context & AsyncStorage_1편과 이어지는 내용입니다. 

앞선 부분을 보지 않으셨다면 확인하시는 것을 추천드립니다. 

 

4. 개발

10. AddTodo 컴포넌트

import React, {useState} from 'react';

import AddButton from './AddButton';
import TodoInput from './TodoInput';

interface Props {}

const AddTodo = ({}: Props) => {
  const [showInput, setShowInput] = useState<boolean>(false);

  return (
    <>
      <AddButton onPress={() => setShowInput(true)} />
      {showInput && <TodoInput hideTodoInput={() => setShowInput(false)} />}
    </>
  );
};

export default AddTodo;

Todo 데이터를 추가하기 위한 컴포넌트이다. 

 

const [showInput, setShowInput] = useState<boolean>(false);

useState를 사용하여 Todo 추가 버튼을 눌렀을 때, 입력할 수 있는 컴포넌트를 화면에 표시하기 위해서 

showInput이라는 State를 추가했다. 

 

11. AddButton 컴포넌트

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

const Container = styled.SafeAreaView`
  position: absolute;
  bottom: 0;
  align-self: center;
  justify-content: flex-end;
`;

const ButtonContainer = styled.TouchableOpacity`
  box-shadow: 4px 4px 8px #999;
`;

const Icon = styled.Image``;

interface Props {
  onPress: () => void;
}

const AddButton = ({onPress}: Props) => {
  return (
    <Container>
      <ButtonContainer onPress={onPress}>
        <Icon source={require('~/Assets/images/add.png')} />
      </ButtonContainer>
    </Container>
  );
};

export default AddButton;

Todo를 입력하기 위해서 화면에 표시하기 위한, AddButton 컴포넌트이다. 

단순한 버튼을 가지고 있는 컴포넌트로 Assets은 마찬가지로 카운터 앱의 이미지를 사용했다. 

 

12. TodoInput 컴포넌트 

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

import Background from './Background';
import TextInput from './TextInput';

const Container = styled.KeyboardAvoidingView`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  justify-content: flex-end;
`;

interface Props {
  hideTodoInput: () => void;
}

const TodoInput = ({hideTodoInput}: Props) => {
  return (
    <Container behavior="padding">
      <Background onPress={hideTodoInput} />
      <TextInput hideTodoInput={hideTodoInput} />
    </Container>
  );
};

export default TodoInput;

Todo 추가 버튼을 클릭했을 때, 표시될 TodoInput 컴포넌트이다. 

 

화면을 어둡게 처리할 Background 컴포넌트와 텍스트를 입력받을 TextInput 컴포넌트로 구성되어 있다. 

 

interface Props {
  hideTodoInput: () => void;
}

const TodoInput = ({hideTodoInput}: Props) => {

TodoInput 컴포넌트를 숨기기 위해서 AddTodo 컴포넌트에서 만든 hideTodoInput 함수를 Props를 통해 

전달받았다. 

 

13. Background 컴포넌트

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

const Container = styled.TouchableOpacity`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`;

const BlackBackground = styled.View`
  background-color: #000;
  opacity: 0.3;

  width: 100%;
  height: 100%;
`;

interface Props {
  onPress: () => void;
}

const Background = ({onPress}: Props) => {
  return (
    <Container onPress={onPress}>
      <BlackBackground />
    </Container>
  );
};

export default Background;

TodoInput 컴포넌트가 활성화되었을 때, 배경을 어둡게 하기 위해서 사용되는 Background 컴포넌트이다. 

 

단순하게 화면에 검은색 배경의 투명도를 가지는 뷰 컴포넌트를 화면에 표시한다. 

또한 전달받은 Props를 통해서 컴포넌트를 선택하면 TodoInput 컴포넌트를 숨기도록 설정했다. 

 

14. TextInput 컴포넌트

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

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

const Input = styled.TextInput`
  width: 100%;
  height: 40px;

  background-color: #fff;
  padding: 0px 8px;
`;

interface Props {
  hideTodoInput: () => void;
}

const TextInput = ({hideTodoInput}: Props) => {
  const {addTodoList} = useContext<ITodoListContext>(TodoListContext);

  return (
    <Input
      autoFocus={true}
      autoCapitalize="none"
      autoCorrect={false}
      placeholder={'할 일을 작성해주세요.'}
      returnKeyType="done"
      onSubmitEditing={({nativeEvent}) => {
        addTodoList(nativeEvent.text);
        hideTodoInput();
      }}
    />
  );
};

export default TextInput;

useContext를 사용해서 Context를 사용할 수 있게 설정했다. 

초기값은 TodoListContext를 전달하였고, 데이터 추가를 위해서 addTodoList 함수를 할당받았다. 

 

 

3. 결과물

https://github.com/SeoJaeWan/TodoList

GitHub - SeoJaeWan/TodoList