All Articles

React Native, TypeScript, React Hook Simple Code

React Native 2e 3장 일부 코드를 바꿔봤습니다

  • useState는 setState 같은 것. 인자에 초기값 넣어주기
  • useCallback 에 대한 더 자세한 설명이 있지만, 일단 event 함수라고 생각
import React, { useCallback, useState } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

const WeatherProject = () => {
  const [zip, setZip] = useState<string>('');
  const handleChangText = useCallback(text=>setZip(text), [zip]);
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        You input {zip}
      </Text>
      <TextInput
        style={styles.input}
        onChangeText={handleChangText}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: 'center'
  }
});

export default WeatherProject;

원래는 아래와 같은 코드임.

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "" };
  }

  _handleTextChange = event => {
    this.setState({ zip: event.nativeEvent.text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

React Hook 개념을 더 공부는 해야겠지만, 일단 하루 배운 것으로 바로 적용은 가능했다. 맞는 로직인지는 잘 모르겠다 ㅎㅎ. 갓윤재님 감사합니다 :)

전체 코드는 깃헙에..

Published 25 Jun 2019