React Native Tutorial 따라하기 📱

📌 튜토리얼을 따라한 프로젝트입니다!

상태(State) 추가하기

todos 상태 생성하기

할 일 목록 추가, 삭제 기능 등을 구현하기 위해서는 상태값을 정의해야 합니다. todos 라는 속성으로 상태를 정의해서 할 일 목록의 상태를 관리하겠습니다. todos 객체는 아래와 같이 세 가지 속성값을 가집니다.

todos : {id: Number, textValue: string, checked: boolean }

id 각 목록의 고유 아이디
textValue 목록 내용
checked 완료 여부. (true이면 완료 false이면 미완료)

본 튜토리얼에서는 상태 관리를 위해서 훅(hook)을 사용하겠습니다.

훅(hook)은 리액트 버전 16.8에 추가된 기능으로 훅을 이용하면 함수형 컴포넌트에서도 컴포넌트의 상탯값을 관리할 수 있고 컴포넌트의 생명 주기 함수를 이용할 수 있습니다. 훅과 관련된 내용은 링크를 참조하시기 바랍니다.

훅을 사용하기 위한 useState를 import 하기

app.js 파일에 아래의 명령어를 입력해주세요!

import React, {useState} from 'react';
const [todos, setTodos] = useState([]);

app.js 전체 보기

import React, {useState} from 'react';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
import {SafeAreaView, StyleSheet, TextInput, View, Text, ScrollView} from 'react-native';

const App = () => {
  //  todos: {id: Number, textValue: string, checked: boolean }
  const [todos, setTodos] = useState([]);
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.appTitle}>Hello Todolist</Text>
      <View style={styles.card}>
        <TodoInsert />
        <TodoList />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#3143e8',
  },
  appTitle: {
    color: '#fff',
    fontSize: 36,
    marginTop: 30,
    marginBottom: 30,
    fontWeight: '300', 
    textAlign: 'center',
    backgroundColor: '#3143e8',
  },
  card: {
    backgroundColor: '#fff',
    flex: 1,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    marginLeft: 10,
    marginRight: 10,
  },
  input: {
    padding: 20,
    borderBottomColor: '#bbb',
    borderBottomWidth: 1,
    fontSize: 24,
    marginLeft: 20,
  },
});

export default App;

추가 설명

useState 훅은 인자로 초기 상태값을 받습니다. number, string, array 등이 인자값으로 들어갈 수 있습니다. 우리는 할 일 목록 객체를 담을 배열이 필요하기 때문에 빈 배열([])을 인자값으로 넣어주었습니다.

useState 훅은 배열에 두 개의 값을 넣어 반환합니다. 첫 번째 요소는 상태값으로, 함수 호출 시 입력한 인수가 초기값으로 사용됩니다. 두 번째 요소는 상태값을 변경할 수 있는 함수입니다. 본 튜토리얼에서 todos는 할 일 목록의 현재 상태를 나타내며 setTodos는 todos를 업데이트 해주는 함수입니다.