스무디 한잔 마시며 끝내는 React Native - TodoList App

교재 6장 TodoList App 입니다.

코딩을 다 하고나면 다음과 같은 Todo List App이 만들어집니다.

여기서는 Context 와 Async Storage 개념이 메인입니다.

간략히 해서 Context 는 각 Component 사이 공통으로 사용가능한 전역변수이고

AsyncStorage 는 app 종료- 실행 해도 data가 유지되는 기능을 합니다.

- Context API : 장점은 component 마다 props 로 인자를 전달하지않아도 되는 것. React 의 Component.

Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider, 그리고 전역 상태를 받아 사용하는 Consumer로 나뉘어져 있습니다.

context는 컴포넌트가 Provide한 상태가 저장됩니다. 
Consumer는 이 context를 통해 전역 상태에 접근할 수 있습니다. 
여러 context가 존재할 수 있습니다. 
단, 하나의 context만 존재한다면 성능상 이슈가 있을 수 있으니 유의할 필요가 있습니다.
context 안에는 Provider와 Consumer가 정의되어 있으며 다른 컴포넌트에서는 이것들을 이용해 상태에 접근합니다.

provider 는 context에 상태를 제공합니다. 즉, 다른 컴포넌트가 해당 상태에 접근하여 사용할 수 있습니다.
제공된 상태에 접근하기 위해서는 Provider의 하위 컴포넌트에 포함되어야 합니다.
따라서, 모든 컴포넌트에서 접근해야하는 상태를 제공하기 위해서는 루트 컴포넌트 index.js 혹은 app.js에서 Provider를 정의해야 합니다.

consumer 는 제공된 상태에 접근하는 방법 중 하나입니다.
context는 Consumer 사이에 있는 처음의 객체를 context에 인자로 전달하기 때문에 바로 JSX를 작성하는 것이 아닌 빈 객체를 작성하고 나서 JSX를 작성해야 합니다.

import React from 'react'

export default React.createContext({})


import ShopContext from './path/to/shop-context'; // React.createContext() 객체

class App extends Component {
  render() {
    return (
      <ShopContext.Provider value={{
          products: [],
          cart: []
        }
      }>
        {/* 이곳 Provider 사이에 있는 컴포넌트는 전역 상태에 접근할 수 있습니다. */}
      </ShopContext.Provider />
    );
  }
};


import ShopContext from '../context/shop-context' // React.createContext() 객체

class ProductsPage extends Component {
  render() {
    return (
      <ShopContext.Consumer>  { }
        {context => (
          <React.Fragment>
            <MainNavigation
              cartItemNumber={context.cart.reduce((count, curItem) => {
                return count + curItem.quantity
              }, 0)}
            />
            <main className="products">...</main>
          </React.Fragment>
        )}
      </ShopContext.Consumer>
    )
  }
};

export default ProductsPage;

- Async Storage

react-native cli 의 경우는 https://reactnative.dev/docs/asyncstorage

expo cli 는 https://docs.expo.io/versions/latest/sdk/async-storage/

 

이번 프로젝트는 완료 해보니 조잡하네요~

추천은 안하겠지만, 필요한 경우에만 따라해보시기 바랍니다.

$ react-native init TodoList

$ cd TodoList

$ npm install --save styled-components

$ npm install --save-dev typescript @types/react @types/react-native

$ npm install --save-dev typescript @types/styled-components babel-plugin-root-import

그리고, async storage 사용을위해 설치.
$ npm install --save @react-native-community/async-storage

 

수정이 필요한 코드 및 src 폴더 전체 첨부합니다.

필요하면 project 생성 후 위 코드만 코드만 넣어서 run 

 

TodoList.zip

0.02MB

 

 

$ npm run android 

책대로 코딩하자니 hierachy 가 복잡합니다.

 

 

다음 chapter 에 날씨앱, 영화소개앱, 인스타그램 Clone coding 이 있습니다만

날씨앱 까지만 구현해본 후 도서를 반납하기로 했습니다.

(다음 chapter code가 필요하신 분은 https://minokuma.tistory.com/category/React%20Native 참고요)

styled-component 및 typescript 를 사용하는 만큼 이점도 많겠지만,

지금 진행중이고 추 후 새로 진행할 프로젝트 수준에서는 사용하지않는 편이 좋을 것 같습니다.