[0804] React-Native 강의 정리

Section 3 : List Building - With Style!

• React에서 어떻게 List를 표현할 것인가?
  : React Native에서 제공하는 Primitive Element인 FlatList 사용
• FlatList : 배열을 받아서 Element의 리스트로 변환함.
  → data와 renderItem prop을 필요로 함.
  → data : 리스트 형태로 표현할 데이터들
  → renderItem : 각 item을 element로 바꿀 함수

const Screen = () => {
    const fruits = [
        { name: 'Fruit 1' },
        { name: 'Fruit 2' },
        { name: 'Fruit 3' },
        { name: 'Fruit 4' },
        { name: 'Fruit 5' },
        { name: 'Fruit 6' },
        { name: 'Fruit 7' },
        { name: 'Fruit 8' },
        { name: 'Fruit 9' },
    ];

    return (
    <FlatList
        data={fruits}
        /*
        renderItem={(element) => {
            //element는 저 배열 속 각각의 원소를 나타내는 것이 아님            
        }}
        */

        renderItem={({ item }) => {
            //item === { name: 'Fruit 1' }
            return <Text>{item.name}</Text>;
        }}
    />);
};
//이대로 빌드하면 경고가 뜸 + iOS에선 스크롤을 지원하지만, 안드로이드는 스크롤이 안 됨.

 

→ 위의 걸 빌드하면 에러가 뜸(아래 사진)

key를 설정하지 않았기 때문에 뜨는 에러.

→ FlatList 사용할 때 key를 제공하지 않을 경우, 비효율적인 방법으로 데이터를 갱신하게 됨.
(모든 리스트를 삭제하고 처음부터 다시 빌드함)

→ 데이터의 변화나 갱신을 Flatlist에서 알아챌 수 있도록 하려면 key를 제공해야 함.
(리액트 네이티브가 각 object를 추적할 수 있게 함?)
⇒ 즉, key는 '성능 최적화(Performance Optimization)'를 위해 사용됨.

 

• Key Property : 적용 방법이 두 가지 존재 함.

1. data에 직접 key 넣기.
→ key는 문자열이어야 하며 고유한 값이어야 함.

const fruits = [
        { name: 'Fruit 1', key: "1" },
        { name: 'Fruit 2', key: "2" },
        { name: 'Fruit 3', key: "3" },
        { name: 'Fruit 4', key: "4" },
        { name: 'Fruit 5', key: "5" },
        { name: 'Fruit 6', key: "6" },
        { name: 'Fruit 7', key: "7" },
        { name: 'Fruit 8', key: "8" },
        { name: 'Fruit 9', key: "9" },
    ];

 

2. keyExtractor 사용

→ 각 item에 대해 key를 적용할 수 있음.

return (
    <FlatList
	// name을 key로 적용하는 모습
        keyExtractor={(fruit) => fruit.name}

        data={fruits}
        renderItem={({ item }) => {
            return <Text>{item.name}</Text>;
        }}
    />);

 

• 기타 FlatList에서 잘 쓰이는 prop

1. horizontal : 목록을 가로로 늘여놓을 것인지 여부 결정. true, false 값으로 설정 가능.

2. showsHorizontalScrollIndicator : 목록이 길어져서 생기는 스크롤바를 없앨 것인지의 여부 결정. 마찬가지로 true, false 값으로 설정 가능.

return (
    <FlatList
        keyExtractor={(fruit) => fruit.name}
        horizontal={true}
        showsHorizontalScrollIndicator={true}
        data={fruits}
        renderItem={({ item }) => {
            return <Text style={styles.textStyle}>{item.name}</Text>;
        }}
    />);

 

 

 

Section 4 : Navigating Users Between Screens

• Button
  → 리액트 네이티브에서는 버튼을 띄우는 방법이 2가지 존재 : Button, TouchableOpacity

1. Button : 버튼을 띄우고 터치를 감지하기 위해 사용되는 아주 간단한 Primitive 컴포넌트.

2. TouchableOpacity : 버튼에 비해 다양한 커스텀이 가능함.

 

• Button : Self Close Tag
  - title : 버튼 위에 띄울 text를 설정할 수 있음.
  - onPress : 버튼이 눌렸을 때 어떤 기능을 할지 지정하는 prop.
  
  
• TouchableOpacity : Not Self Close Tag ⇒ 닫는 태그 꼭 필요함.
  - onPress : 버튼이 눌렸을 때 어떤 기능을 할지 지정하는 prop.
  → 기본적으로 눌렀을 때 Fade out 효과가 있음.
  → 태그 안에 다양한 복수의 태그들을 넣을 수 있음.
  
  
• StackNavigator : 사용자에게 어떤 화면을 보일지 Navigation 기능.
  → props.navigation.navigate() : 어떤 컴포넌트를 띄울지 컴포넌트 이름을 문자열로 전달함.

const Screen = (props) => {  

  return <View>
      <Text style={styles.text}>Home</Text>
      <Button
        onPress={() => props.navigation.navigate("Components")}
        title="Components"
      />
      <TouchableOpacity onPress={() => props.navigation.navigate("List")}>
        <Text>List</Text>
      </TouchableOpacity>
    </View>
};

※ 전체 props에 접근할 일은 굉장히 적기 때문에, 사용할 것만 가져와도 괜찮음.
ex) 밑의 코드

const Screen = ({ navigation }) => {  
//props에서도 navigation만 받기 위해 {} 사용
  return <View>
      <Text style={styles.text}>Home</Text>
      <Button
        onPress={() => navigation.navigate("Components")}
        title="Components"
      />
      <TouchableOpacity onPress={() => navigation.navigate("List")}>
        <Text>List</Text>
      </TouchableOpacity>
    </View>
};

 

 

 

Section 5 : Building Reusable Components

: 그림과 텍스트가 묶여 하나의 항목을 이루는 리스트를 리액트 네이티브로 작성할 때, 비슷한 형식의 각 항목을 따로 만드는 것은 비효율적.
→ 한 항목을 컴포넌트로 만들어 그 컴포넌트가 반복되어 나타나도록 만드는 것이 효율적.

 

※ 개발 시 다양한 컴포넌트를 만들어 사용하게 되기 때문에, components 폴더를 만들어 관리하는 것이 좋음.

 

• Prop
  → Custom Component는 미리 정해진(predefined) prop을 갖고 있지 않기 때문에 직접 추가해야함.
  → 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 prop을 사용할 수 있음.

//부모 컴포넌트
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ChildComponent from '../components/ChildComponent';

const ParentComponent = () => {
    return <View>
        <ChildComponent title="Forest" />
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
    </View>;
};

//자식 컴포넌트
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ChildComponent = (props) => {
    console.log(props);
    return <Text>Child Component</Text>;
};

export default ChildComponent;

console.log 출력 결과

→ 콘솔 창을 통해 로그를 살펴보면 title이라는 prop이 전달되었음을 확인할 수 있음.

 

• Image : Self close Tag
  - source : Image 컴포넌트에 띄울 이미지를 지정할 수 있음.
  → require문을 사용하여 가져올 이미지의 경로를 지정할 수 있음.

 

※ prop으로 값을 넣을 때는 {} 안에 넣으면 됨. 문자열은 안 넣어도 됨.