React Native Tutorial 따라하기 📱

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

할 일 목록 추가하기 - TodoList

app.js 파일에서 todos를 TodoList 컴포넌트에 전달하기

<TodoList todos={todos} />

TodoList로 todos 받기

주의사항

todos는 할 일 목록의 객체가 담긴 배열입니다. 따라서 TodoList컴포넌트에서 TodoListItem 컴포넌트로 전달 할 때에는 배열에 담긴 객체 하나하나를 넘겨줘야합니다.

const TodoList = ({todos}) => {
  return (
    <ScrollView contentContainerStyle={styles.listContainer}>
      {todos.map(todo => (
        <TodoListItem {...todo} />
      ))}
    </ScrollView>
  );
};

설명

map() 함수를 이용해서 todos에 담긴 아이템을 하나씩 TodoListItem 컴포넌트로 전달합니다. 자바스크립트의 디스트럭처링(destructuring) 문법을 이용하면 TodoListItem 컴포넌트에서 아이템 객체에 담긴 값들을 바로 받을 수 있습니다.

컴포넌트에 textValue 값 넣기

const TodoListItem = ({textValue, id, checked}) => {
    return (
        <View style={styles.container}>
            <TouchableOpacity>
                <View style={styles.completeCircle}>
                <View style={styles.completeCircle}>
                    <Icon name="circledowno" size={30} color="#3143e8" />
                </View>
                </View>
            </TouchableOpacity>
            <Text style={[styles.text, styles.strikeText]}>{textValue}</Text>
            <TouchableOpacity style={styles.buttonContainer}>
                <Text style={styles.buttonText}>
                    <Icon name="delete" size={30} color="#e33057" />
                </Text>
            </TouchableOpacity>
        </View>
    );
};

결과보기

경고창

설명

그런데 시뮬레이터 하단에 경고창이 뜨는 걸 볼 수 있습니다. 경고 문구는 다음과 같습니다.

Each child in a list should have a unique 'key' prop.

즉, 리스트에 있는 아이템 객체마다 고유한 key값이 필요하다는 말 입니다.

앞서 새로운 아이템 객체를 생성할 때 랜덤으로 id 값을 만들어준 것을 기억하시나요? id 값을 만들어 준 이유가 바로 여기 있습니다. 리스트에 아이템을 출력할 때에는 각 아이템의 고유 번호를 key 값으로 주어야기 때문입니다. (저희는 간단하게 Math.random()으로 id를 만들었지만, 이는 중복될 가능성이 있습니다. 따라서 실제 서비스를 만들 때에는 uuid와 같은 패키지 등을 이용하여 중복되지 않는 id를 생성해야합니다.)

경고 해결하기

TodoList 컴포넌트로 돌아가서 TodoListItem에 id 값도 같이 넘겨주겠습니다.

<ScrollView contentContainerStyle={styles.listContainer}>
      {todos.map(todo => (
        <TodoListItem key={todo.id} {...todo} />
      ))}
</ScrollView>  

결과보기

주의사항

Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``:
이런 에러가 나면
npm install @react-native-community/cli-debugger-ui --save
이 명령어