React native Typescript 버튼 클릭 시마다 1씩 증가하는 text를 View에 추가하기

아무리 찾아도 안나오던 것을 chat GPT가 해결해주었다. 사랑해~

결과: 버튼을 누를 때마다 count가 증가하면서 아래에 newText가 생성되는 것을 알 수 있음

코드

//RecordScreen.tsx(실험하고 싶은 사람들은 App.tsx에 이 코드를 넣으면 될듯)

import React from 'react';
import MyComponent from './MyComponent';

const RecordScreen = () => {
  return <MyComponent />;
};

export default RecordScreen;

//MyComponent.tsx

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

const MyComponent = () => {
  const [displayTexts, setDisplayTexts] = useState<string[]>([]); //가변배열 세팅
  const [count, setCount] = useState<number>(0);
  const handleButtonPress = () => {
    const newText = `New Text ${count}`; // count 값을 포함한 새로운 텍스트를 생성합니다.
    setCount(count + 1);//이걸 차후에 URL로 바꾸기..
    setDisplayTexts([...displayTexts, newText]);//기존 배열에 새로운 text를 추가하겠다는 뜻.
  };

  return (
    <View style = {{justifyContent:'center',width:300, height:300, backgroundColor:'blue'}}>
      <Button title="Press Me" onPress={handleButtonPress} />//클릭 시 이벤트함수 실행
      {displayTexts.map((text, index) => ( //text를 인자로 받는 map을 만들겠다.
        <TouchableOpacity>
            <Text key={index}>{text}</Text>  //인자인 text가 들어갈 곳.
        </TouchableOpacity>// 텍스트 배열을 순회하며 텍스트를 화면에 표시합니다.
      ))}
    </View>
  );
};

export default MyComponent;