실행 방법

1. 개발에 활용할 핸드폰에는 expo app을 깔아둡니다.
   

2. 터미널을 이용해서 위와 같이 작성하면, expo로 프로젝트 폴더를 만들 수 있습니다.

npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: npx expo start

3. 실행하면 바코드가 나오는 것을 알 수 있고, 해당 바코드를 인식 시키면 모바일에 연동됩니다.

4. 연동이 제대로 됐는 지 확인하기 위해 코드를 app.js의 코드를 수정해보면 됩니다.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>동작 잘 하는거 맞아?</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

React-native 기초

core component

1. Text : text를 담는 컴포넌트
2. View : 다른 컴포넌트를 담을 때 사용하는 컴포넌트, 스타일링할 때 더 쉽게 만들어 줍니다.
3. Image : 이미지를 보여줍니다.
4. TextInput : 키보드를 통해 앱에 텍스트를 입력하기 위한 컴포넌트입니다
5. ScrollView : 스크롤 컨테이너를 제공합니다. 이것으로 다른 컴포넌트를 감쌀 수 있습니다.
6. StlyeSheet : css stylesheets와 비슷한 레이어를 제공합니다.

스타일링하기

Inline styles

프로퍼티를 설정해서 적용합니다.
예시로 Text 컴포넌트에 간단한 스타일을 적용해 봅시다.

<Text style={{ color: "red", borderWidth: 2, margin: 10, padding: 10 }}>
          hello
</Text>

이 처럼 style이라는 프로피티럴 설정하고 그 안에 객체로 스타일을 넣어줄 수 있습니다.

stlyeSheet Object

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

export default function App() {
  return (
    <View>
      <Text style={styles.dummyText}> another text </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  dummyText: {
    margin: 100,
    padding: 10,
    borderWidth: 1,
  },
});

위와 같이 작성하면, Text 컴포넌트에 style을 styleSheet Object로 적용시켜줄 수 있습니다.
dummyText라는 이름을 부여하고 이를 통해 적용한 컴포넌트를 선택하고 css와 동일하지만 객체 형식으로 작성합니다. 작접으로는 자동완성과 이를 바탕으로 문법 체크를 해준다는 것이 있습니다. 또한 css 담당 부분과 return 부분을 분할하여 관리할 수 있는 것도 장점입니다.

레이아웃 및 플렉스 박스 살펴보기

View 컴포넌트는 기본적으로 flex 방식으로 내부 컴포넌트를 display 해줍니다. 또한 row방식이 아닌 columm방식을 기본 값으로 갖고 있습니다.

이를 응용해서 View 컴포넌트를 통해 레이아웃을 잡고 styleSheet를 적용해줍니다.

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

export default function App() {
  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.textInput} placeholder="너의 목표" />
        <Button title="추가하기" />
      </View>
      <View style={styles.goalsContainer}>
        <Text>목표 리스트</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  appContainer: {
  	...
  },
  inputContainer: {
  	...
  },
  textInput: {
    ...
  },
  goalsContainer: {
    ...
  },
});

이벤트 처리하기

버튼에 자주 사용하는 onclick 대신에 onPress를 사용하고, onChange 대신에 onChangeText를 사용합니다.
react 기반이기 때문에 react에서 사용했던 usestate hook을 같은 방식으로 사용할 수 있습니다.

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

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const [goalList, setGoalList] = useState([]);

  const goalInputHandler = (enteredText) => {
    setEnteredText(enteredText);
  };

  const addGoalHandler = () => {
    setGoalList((goalList) => [...goalList, enteredText]);
  };

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="너의 목표"
          onChangeText={goalInputHandler}
        />
        <Button title="추가하기" onPress={addGoalHandler} />
      </View>
      <View style={styles.goalsContainer}>
        <Text>목표 리스트</Text>
        {goalList.map((goal) => (
          <Text key={{ goal }}>{goal}</Text>
        ))}
      </View>
    </View>
  );
}

scroll 할 수 있게 만들어주기

ScrollView 컴포넌트를 사용해서 만들어줍니다. 이를 적용하면 css가 달라질 수도 있습니다. 그럴 때는 이 ScrollView를 View로 감싸주고 css를 적용해주면 이전과 같은 모습으로 적용되는 것을 확인할 수 있습니다.

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

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const [goalList, setGoalList] = useState([]);

  const goalInputHandler = (enteredText) => {
    setEnteredText(enteredText);
  };

  const addGoalHandler = () => {
    setGoalList((goalList) => [...goalList, enteredText]);
    setEnteredText("");
  };

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          value={enteredText}
          placeholder="너의 목표"
          onChangeText={goalInputHandler}
        />
        <Button title="추가하기" onPress={addGoalHandler} />
      </View>
      <View style={styles.goalsContainer}>
        <ScrollView>
          <Text>목표 리스트</Text>
          {goalList.map((goal) => (
            <View style={styles.goalItem} key={{ goal }}>
              <Text style={{ color: "white" }}>{goal}</Text>
            </View>
          ))}
        </ScrollView>
      </View>
    </View>
  );
}