[RN공부하기] [5]Lists & ScrollView

(1) List - map함수를 사용해서 데이터 뿌려주기

//App.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

export default function App() {

  const [people, setPeople ] = useState([
    {name: "susan", key:'1' },
    {name: "yoshi", key:'2' },
    {name: "mario", key:'3' },
    {name: "luigi", key:'4' },
    {name: "peach", key:'5' },
    {name: "toad", key:'6' },
    {name: "bowser", key:'7' },
  ])
  return (
    <View style={styles.container}>
        {people.map( (index) => {
          return (
            <View key={index.key}>
                <Text style={styles.item}>{index.name}</Text>
            </View>
          )
        })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item:{
    marginTop : 24,
    padding : 30,
    backgroundColor : 'pink',
    fontSize : 24
  }
});

map함수를 사용해서 데이터 뿌려주는건 react랑 같다. map함수를 사용할때 항상 key값을 넣어줘야하는거 잊지 말자.

:: 결과화면

map 함수에서 return을 지우고 싶다. 원래 리액트에서도 안썻던것 같아서 코드 수정

{people.map( (index) => (
   <View key={index.key}>
       <Text style={styles.item}>{index.name}</Text>
   </View>
))}

 

 

(2) ScrollView - 모바일에선 자동으로 스크롤이 생기기 않기 때문에 꼭 이걸 넣어줘야함!!!

https://reactnative.dev/docs/scrollview

ScrollView · React Native

ScrollView추가하기

import { StyleSheet, Text, View, Button, TextInput, ScrollView } from 'react-native';

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView } from 'react-native';

export default function App() {
  
  const [people, setPeople ] = useState([
    {name: "susan", key:'1' },
    {name: "yoshi", key:'2' },
    {name: "mario", key:'3' },
    {name: "luigi", key:'4' },
    {name: "peach", key:'5' },
    {name: "toad", key:'6' },
    {name: "bowser", key:'7' },
  ])
  return (
    <View style={styles.container}>
      <ScrollView>
        {people.map( (index) => (
            <View key={index.key}>
                <Text style={styles.item}>{index.name}</Text>
            </View>
          ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item:{
    marginTop : 24,
    padding : 30,
    backgroundColor : 'pink',
    fontSize : 24
  }
});

모바일에서 봤을때 스크롤이 없었는데 스크롤이 생김!!!