코딩, 독서, 여행, 영화, 맛집

0%

[React Native] MobX State Tree 학습하기 #2

작성일 Edited on In , Views: Disqus:

https://img.youtube.com/vi/snBvYS6eC2E/mqdefault.jpg

이전글 "[React Native] MobX State Tree 학습하기 #1" 에서 이어지는 내용입니다.

본 포스팅은 아래 강의를 보면서 정리한 노트입니다.
https://www.youtube.com/watch?v=snBvYS6eC2E



BookStore에 초기 데이터 등록하기

BookStore.js 파일을 수정합니다. books 배열에 다음과 같이 Book 정보를 입력합니다. 이제 BookStore는 book 데이터 하나를 가지고 생성됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const BookStore = types
  .model('Books', ｛
    books: types.array(Book),
  ｝)
  .create(｛
    books: [
      // book 정보 등록
      ｛
        title: 'Ready Player One',
        author: 'Ernest Cline',
        read: true,
      ｝,
    ],
  ｝);

이제 앱을 실행하고 Console 에서 값을 확인해봅니다. Target의 첫번째 항목을 살펴보면, value에 우리가 입력한 Book 데이터가 보입니다.



BookStore에 addBook 액션(action) 추가하기

다시 BookStore.js 파일을 수정합니다. 그리고 actions에 addBook 함수를 추가합니다. actions에는 store에서만 호출할 수 있는 private 함수를 생성 할 수 있습니다. 이제 BookStore의 addBook 함수를 호출하면 books 배열에 새로운 book 객체가 추가됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const BookStore = types
  .model('Books', ｛
    books: types.array(Book),
  ｝)
  // actions 추가
  .actions(self => (｛
    addBook(book) ｛
      self.books.push(book);
    ｝,
  ｝))
  .create(｛
    books: [
      ｛
        title: 'Ready Player One',
        author: 'Ernest Cline',
        read: true,
      ｝,
    ], // 초기 값
  ｝);


입력 화면 만들기

App.js 파일을 수정합니다. 그리고 react-native에서 StyleSheet, SafeAreaView, TextInput, Text, Button 컴포넌트를 import 합니다.

1
2
3
4
5
6
7
import ｛
  SafeAreaView,
  StyleSheet,
  TextInput,
  Text,
  Button
｝ from 'react-native';


그리고 initialState 값을 설정합니다. initialState는 title와 author 속성을 가집니다.

1
const initialState = ｛ title: '', author: '' ｝;


그다음 state를 생성합니다. state의 기본값으로는 initialState 를 입력합니다. 그리고 onChangeText 함수와 addBook 함수를 생성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class App extends React.Component ｛

  state = initialState;

  // TextInput 입력 이벤트 함수
  onChangeText = (key, value) => ｛
    this.setState(｛
      [key]: value,
    ｝);
  ｝;

  // book 추가하기 함수
  addBook = () => ｛
    BookStore.addBook(this.state);
    this.setState(initialState);
  ｝;

  ...


그 다음 화면 UI에 적용할 StyleSheet를 정의합니다. <TextInput> 컴포넌트의 높이는 50, 배경색은 회색 그리고 위아래 여백으로 10을 주었습니다.

1
2
3
4
5
6
7
const styles = StyleSheet.create(｛
  input: ｛
    height: 50,
    backgroundColor: '#ededed',
    marginVertical: 10,
  ｝,
｝);


그리고 화면에 보여줄 입력 박스(TextInput) 2개와 버튼을 입력합니다. 첫번째 TextInput는 제목(title)를 입력받습니다. 두번째 TextInput는 저자(author)를 입력받습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class App extends React.Component ｛
  ...
  render() ｛
    return (
      <SafeAreaView>
        <TextInput
          style=｛styles.input｝
          value=｛this.state.title｝
          onChangeText=｛value => this.onChangeText('title', value)｝
        />
        <TextInput
          style=｛styles.input｝
          value=｛this.state.author｝
          onChangeText=｛value => this.onChangeText('author', value)｝
        />
        <Button title="Add Book" onPress=｛this.addBook｝ />
      </SafeAreaView>
    );
｝;


MobX observer 클래스 등록하기

mobx-react에서 observer를 import합니다. 그리고 대상 클래스 바로 위에 어노테이션 @observer를 입력합니다.

1
2
3
4
5
6
import ｛ observer ｝ from 'mobx-react';

@observer
class App extends React.Component ｛

...

그리고 다음은 지금까지 구현한 전체 소스코드입니다.

carbon.png


아래는 결과 화면입니다. 제목과 저자를 입력하고 Add Book를 누르면 아래에 추가된 정보가 표시됩니다.