React-Native를 사용하여 Todo List 앱 빌드

안녕하세요 여러분, 오늘 우리는 react-native를 사용하여 할일 목록 앱을 만드는 방법을 볼 것입니다.
TodoList 앱을 빌드하는 방법을 배우면 반응 네이티브의 많은 기본 개념을 배울 수 있습니다. 저는 항상 프레임 워크에 익숙해지기 위해 이런 종류의 작은 프로젝트를 만들고 싶습니다.

최상의 결과를 얻으려면 게시물을 읽지 마십시오. 글을 읽은 후 직접 앱을 만들어서 개념을 이해하세요. 저를 믿으세요. 앱을 직접 만들면 모든 의심이 사라집니다.

아래 명령을 사용하여 expo를 설치하여 시작하겠습니다.

npm install -g expo-cli

expo init myTodoListApp

이것은 우리의 TodoList 앱의 디자인입니다

여기에서 빌드 할 세 가지 구성 요소가 있습니다.

1. 제목 (상당히 간단 함)
2. 작업 항목
3. 버튼이있는 작업 입력 필드

Text구성 요소를 사용하여 제목을 작성하고 스타일을 지정합니다.

이 코드를 실행하면 다음 출력이 표시됩니다.

이제 TaskItem.js각각에 대한 별도의 구성 요소가 될라는 새 파일을 만들어 보겠습니다 task.

이것이 우리가 구축하려는 UI 구성 요소입니다.

두 개의 자식이있는 래퍼 뷰가있을 것입니다. 첫 번째는 인덱스 컨테이너이고 다른 컨테이너에는 작업 텍스트와 삭제 아이콘이 있습니다.

index, task및 deleteTask을이 구성 요소에 대한 소품으로 허용합니다 . deleteTask특정 작업을 삭제하기 위해 상위 구성 요소에서 전달 된 콜백 함수입니다. 삭제 아이콘을 누르면이 콜백 함수를 호출합니다. 아이콘의 경우 MaterialIcons엑스포에서 제공하는 내장을 사용했습니다 .

다음은 눌렀을 때 목록에 작업을 추가하는 버튼이있는 입력 필드입니다. TaskInputField.js또 다른 기능적 구성 요소 가 될라는 새 파일을 만듭니다 .

이 구성 요소에서는 하나의 후크를 사용하여 입력 필드 상태를 처리합니다.
const [task, setTask] = useState();

또한이 컴포넌트는 목록에 작업을 추가하는 props의 콜백 함수를받습니다. 작업을 추가 한 후 입력 필드를 지 웁니다.

나는 감쌌다 TextInput에 KeyboardAvoidingView키보드를 숨기고 피할 수 있습니다.

이 코드를 추가 한 후의 결과입니다.

이제에서 App.js표제 구성 요소 아래에 이러한 기능 구성 요소를 추가 할 것입니다.

tasks다음 코드 줄을 사용하여 상태를 처리하기위한 후크를 생성합니다 . tasks처음에는 빈 배열이됩니다.
const [tasks, setTasks] = useState([]);

그 후 작업 추가 및 삭제를위한 두 가지 기능을 생성합니다.

addTask함수를 TaskInputField컴포넌트에 전달 하고 deleteTask함수를 TaskItem컴포넌트에 소품 으로 전달 합니다 .

App.js위에서 언급 한 모든 것을 추가 한 후의 전체 코드는 다음과 같습니다 .

보시다시피 모든 작업을 반복하고 그에 따라 tasks렌더링 TaskItem합니다. ScrollView스크롤을 처리 하는데도 사용 하고 있습니다.

이제 끝났습니다. 다음은 최종 출력입니다.

다음은 프로젝트의 Github 링크입니다. 도움이 되었기를 바랍니다.

이것으로 끝입니다. 당신이 그것을 좋아하기를 바랍니다. 더 복잡한 기능을 추가하여이 프로젝트를 확장하려고합니다. 향후 게시물의 새로운 기능을 따르고 싶다면 댓글로 알려주세요.

이 시점까지 읽어 주셔서 감사합니다. 이 이야기에 대한 제안과 👏에 대한 의견을 남기십시오.