[youtube] CSS로 인터랙티브 모션 효과 주기 #1 Input-1
2018-08-24
React Native #5 비동기 / 애니메이션 / 네이티브 컴포넌트
2018-11-15
Explanation
이제 가장 처음에 해볼만한 몇가지를 준비해봤습니다. 제목에서 보시다 싶이 비동기 통신과 애니메이션, 그리고 네이티브 컴포넌트 사용에 대해 짧게, 코드에서 바로 적어보려 합니다.
역시 예제 소스를 만들어서 깃헙에 올렸습니다. https://github.com/falsy/react-native-example/tree/native-components를 참고하시면 좋을 것 같습니다.
이전 글을 보셨다면, ./src/views/Dashboard.js 만 보셔도 될 거 같아요.
바로 코드로 갑니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
// ./src/views/Dashboard.js import React, {Component} from 'react'; import {DatePickerIOS, AlertIOS, Animated, Easing, StyleSheet, Text, View} from 'react-native'; // 딱 보시면 아시겠지만 // 날짜를 선택할 수 있는 네이티브 컴포넌트 : DatePickerIOS // 알림창 네이티브 컴포넌트 : AlertIOS // 애니메이션을 사용할 수 있는 컴포넌트 : Animated // 애니메이션의 easing 값을 줄 수 있는 : Easing import DashboardFooter from '../components/DashboardFooter'; import DashboardHeader from '../components/DashboardHeader'; import axios from 'axios'; // 저는 비동기 통신에서 주로 axios를 많이 사용해서 axios를 예로 사용했습니다. class Dashboard extends Component { constructor(props) { super(props); this.state = { data: '', date: new Date(), datePickerShow: false, left: new Animated.Value(0) // 애니메이션 값을 이렇게 Animated 객체로 기본값을 설정해 주셔야 합니다. }; } componentDidMount() { axios.get('http://localhost:44444/test').then(data => { this.setState({ data: data.data }); }); // 이건 이렇게 그냥 하면 오류가 나겠죠? 저는 개인적으로 간단하게 노드로 서버를 하나 띄어서 해봤어요. // 흔한 예로 setTimeout()을 써서 해보셔도 될 거 같아요. // setTimeout(() => { // this.setState({ // data: 'test' // }); // }, 500); } actionAnimate() { Animated.timing( this.state.left, { toValue: 100, // 애니메이션 변화 할 마지막 값? easing: Easing.quad, // 이진값 duration: 5000, // 애니메이션할 시간?? } ).start(); } actionAlert() { AlertIOS.alert( 'alert', 'Hello World.' ); // 알림창 첫번째 파라미터는 타이틀 // 두번째 파라미터는 메세지 // 생략했지만 세번째 파라미터는 콜백 } actionDatePicker() { this.setState({ datePickerShow: true }); // 이건 그냥 구현을 위해서 actionDatePicker() 가 실행되면 // 데이트피커가 출력되도록 합니다. } render() { return ( <View style={{flex: 1}}> <DashboardHeader /> <View style={styles.content}> <Text style={styles.welcome}>{this.state.data}</Text> <Text style={styles.welcome} onPress={this.actionAnimate.bind(this)}>Animate</Text> <Text style={styles.welcome} onPress={this.actionAlert.bind(this)}>Alert</Text> <Text style={styles.welcome} onPress={this.actionDatePicker.bind(this)}>DatePicker</Text> </View> { this.state.datePickerShow ? <View> <DatePickerIOS date={this.state.date} /> </View> : null } <Animated.View style={{ position: 'absolute', zIndex: 1, top: 100, width: 100, height: 50, backgroundColor: 'red', left: this.state.left.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'], }), // 요게 조금 추가된 부분이랄까요? // 위 예에서는 변화할 값이 % 이다보니 이게 그냥 하면 안되거든요, ('100%' 는 사실 그냥 문자열이다보니??) // 그래서 이렇게 inputRange, outputRange 속성으로 사용할 수 있답니다. }}> <Text>Animated</Text> </Animated.View> <DashboardFooter /> </View> ); } } const styles = StyleSheet.create({ wrap: { flex: 1 }, content: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', }, welcome: { fontSize: 20, textAlign: 'center', color: '#000' } }); export default Dashboard |
사실 위 부분들은 아주 간단하게 React Native 공홈을 확인하시면 쉽게 해보실 수 있어요.
(그 밖에도 쉽게 사용할 수 있는 것들이 많습니다.)
참고 링크.
알림창
데이트 피커
애니메이션
짜짠 사실 여기까지가 준비한 리액트 네이티브의 첫걸음? 정도인 거 같아요.
(여기서부터는 약간 아주 짧은 개인적인 생각인데요.) 리액트 네이티브는 정말 신기할 정도로 리액트에 익숙하다면 쉽게 다가갈 수 있는거 같습니다. 하지만 여기에는 적지 않았지만 디바이스의 권한이 필요한 기능들이나 조금만 깊은 네이티브 요소들을 사용하기는 정말 쉽지 않아요. 안드로이드 스튜디오나 Xcode에 대한 지식과 기본 네이티브 언어(자바, 오브젝트씨, 등.. )나 애플리케이션에 대한 이해가 있으면 좋을 거 같아요.
이제.. 많은 계란을 준비해야 할 것 같습니다.
