리액트네이티브 스타일링, FlatList

 

 

 

리액트 네이티브

 

디버

npm install --save @react-native-community/cli-debugger-ui

 

$ react-devtools

 

애뮬레이트 실행 or 재실행(ctrl + m - Reload)

 

그러면 이렇게 React 개발할 때 사용하던 devtools 가 작동됩니다.

 

 

<View> 컴포넌트의 주요 역할

다른 자식 컴포넌트들을 구조화하고 묶음

 

HTML 요소 (div, p ,input) 과 같은 요소

사용불가 > 웹이 아니기 때문에 네이티브 views로 컴파일할 수 없음.

 

컴포넌트 스타일링과 CSS 관계

React Native 컴포넌트 스타일링은 CSS의 영향을 받아 만들어짐

 

const styles = StyleSheet.create({})을 사용하는 이유

StyleSheet를 통해 유효성 검증을 할 수 있고, 성능 향상에도 도움을 줄 수 있음

 

리액트 네이티브의 레이아웃은 주로 플렉스박스를 사용한다.

레이아웃 생성 등 콘텐츠를 구성할 수 있도록 해주는 개념 혹은 스타일링 property set 이다.

 

그래서 <View> 컴포넌트의 기본 스타일링/레이아웃 동작은

플렉스 박스를 통해 자식 컴포넌트를 정리함.

 

 

---

 

스타일 적용

 

<View style={styles.goalsContainer}>
{courseGoals.map((goal) => (
  <View key={goal} style={styles.goalItems}>
    <Text style={styles.goalText}>{goal}</Text>
  </View>
))}
</View>

 

스타일 코드

  goalItems: {
    margin: 8,
    padding: 8,
    borderRadius: 6,
    backgroundColor: "#5e0acc",
  },
  goalText: {
    color: "white",
  },

 

안드로이드에서는 <Text> 컴포넌트에 둥근 모서리 적용이 되지만

IOS는 텍스트에 적용되지 않는다.

 

그래서 <View> 컴포넌트에 스타일을 적용한다.

여기서 웹 CSS 와 달리 상속이나 연속적인 속성 적용(캐스캐이딩)은 일어나지 않고 독립적인 컴포넌트에서만 적용된다.

 

 

---

 

FlatList

안드로이드의 리사이클러뷰랑 흡사하다.

필수적인 부분만을 렌더링하여 스크롤 기능을 최적화함.

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

export default function App() {
  const [enteredText, setEnteredText] = useState('')
  const [courseGoals, setCourseGoals] = useState([])

  const goalInputHandler = (enteredText)=>{
    setEnteredText(enteredText);
  }
  const addGoalHandler = () => {
    setCourseGoals((currentCourseGoals) => [
      ...currentCourseGoals,
      {
        text: enteredText,
        id: Math.random().toString()
      },
    ]);
  }

  const renderItem = (itemData) => {
    console.log(itemData)
    return (
      <View style={styles.goalItems}>
        <Text style={styles.goalText}>
          {itemData.item.text}
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Your Course 목표!"
          onChangeText={goalInputHandler}
        />
        <Button title="목표 추가" onPress={addGoalHandler} />
      </View>
      <View style={styles.goalsContainer}>
        <FlatList
          data={courseGoals}
          renderItem={renderItem}
          keyExtractor={(item, index) => {
            return item.id;
          }}
          alwaysBounceVertical={false}
        />
      </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,
    borderBottomColor: "#cccccc",
  },
  textInput: {
    borderWidth: 1,
    borderColor: "#cccccc",
    width: "70%",
    marginRight: 8,
    padding: 8,
  },
  goalsContainer: {
    flex: 5,
  },
  goalItems: {
    margin: 8,
    padding: 8,
    borderRadius: 6,
    backgroundColor: "#5e0acc",
  },
  goalText: {
    color: "white",
  },
});