[React Native] Udemy: React Native / Session 2 React Native의 기초

• 컴포넌트
  • View
    • View는 다른 컴포넌트를 담고 배치하는 컴포넌트
    • View안에는 텍스트를 넣을 수 없다. Text 컴포넌트로 감싼 텍스트를 넣어야 한다.
  • Text
    • style={const객체.스타일이름}
    • margin: 간격 넓이
    • borderWidth: 테두리 두께
    • borderColor: 테두리 색상
    • padding: 여백 넓이
  • TextInput
    • 사용자가 텍스트를 입력할 수 있게 해주는 컴포넌트
  • Button
    • Button 사용시 import에 Button 적어주기
    • <Button title=’클릭’/>
  • 예제

  import { StyleSheet, Text, View, Button } from 'react-native';
  
  export default function App() {
    return (
      <View style={styles.container}>
        <View>
        <Text
        style={styles.dummyText}
        >
          Another piece of Text!
          </Text>
        </View>
        <Text
        style={styles.dummyText}
        >
          Hello World!
          </Text>
        <Button title='Tap me!'/>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    dummyText: {
      margin: 16,
      padding: 16, 
      borderWidth: 2,
      borderColor: 'blue',
    }
  });
  

•  Flexbox
  • 레이아웃 생성 등 콘텐츠를 구성할 수 있도록 해주는 개념 혹은 스타일링 프로퍼티 세트
  • 플렉스 박스를 통해 자식 컴포넌트를 정리함
  • 예제

  import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
  
  export default function App() {
    return (
      <View style = {styles.appContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.textInput} placeholder="Your course goal!"/>
          <Button title="Add Goal"/>
        </View>
        <View style={styles.goalsContainer}>
          <Text>List of goals...</Text>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    appContainer: {
      flex: 1,
      paddingTop: 50,
      paddingHorizontal: 16
    },
    inputContainer: {
      flex: 1, 
      flexDirection: 'row',
      justifyContent:'space-between',
      alignItems: 'center',
      marginBottom: 24,
      borderBottomWidth: 1,
      borderColor: '#cccccc'
    },
    textInput: {
      borderWidth: 1,
      borderColor: '#cccccc',
      width: '70%',
      marginRight: 8,
      padding: 8
    },
    goalsContainer: {
      flex: 5
    }
  });
  

• 이벤트 처리하기
  • useState
    • usetState import 하기
    • const [value, setValue] = useState(초기값);
    • 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸는 함수이다.
  • 예제

  import { useState} from 'react';
  import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
  
  export default function App() {
    const [enteredGoalText, setEnteredGoalText] = useState('');
  
    function goalInputHandler(enteredText) {
      setEnteredGoalText(enteredText);
    };
  
    function addGoalHandler() {
      console.log(enteredGoalText);
    };
  
    return (
      <View style = {styles.appContainer}>
        <View style={styles.inputContainer}>
          <TextInput
          style={styles.textInput}
          placeholder="Your course goal!"
          onChangeText={goalInputHandler}
          />
          <Button title="Add Goal" onPress={addGoalHandler}/>
        </View>
        <View style={styles.goalsContainer}>
          <Text>List of goals...</Text>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    appContainer: {
      flex: 1,
      paddingTop: 50,
      paddingHorizontal: 16
    },
    inputContainer: {
      flex: 1, 
      flexDirection: 'row',
      justifyContent:'space-between',
      alignItems: 'center',
      marginBottom: 24,
      borderBottomWidth: 1,
      borderColor: '#cccccc'
    },
    textInput: {
      borderWidth: 1,
      borderColor: '#cccccc',
      width: '70%',
      marginRight: 8,
      padding: 8
    },
    goalsContainer: {
      flex: 5
    }
  });
  

•  스크롤
  • ScrollView import 하여 사용
• FlatList
  • 스크롤을 실현하는 컴포넌트
• Pressable
  • 터치할 수 있게 만드는 컴포넌트
  • onPress= 함수 로 넣는다.