0%

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

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 함수를 생성 할 수 있습니다. 이제 BookStoreaddBook 함수를 호출하면 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 값을 설정합니다. initialStatetitleauthor 속성을 가집니다.

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에서 observerimport합니다. 그리고 대상 클래스 바로 위에 어노테이션 @observer를 입력합니다.

1
2
3
4
5
6
import { observer } from 'mobx-react';

@observer
class App extends React.Component

...

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

carbon.png


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



댓글, 팔로우, 좋아요 해 주시는 모든 분께 감사합니다.

항상 행복한 하루 보내시길 바랍니다.


vote, reblog, follow @anpigon


Originally posted on http://steemit.com