240402 react exam

import React, { useState } from "react";
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css'; // 부트스트랩 CSS 파일 추가

export default function Count() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    if (count < 10) {
      setCount(count + 1);
    } else {
      setCount(1);    // 10이 넘으면 다시 1부터 시작
    }
  };

  const handleReset = () => {
    setCount(1); // 카운트 리셋
  };

  return (
    <>
     <span style={{ padding: 10, fontSize: 50, fontWeight: 'bold' }}>{count}</span>
      <br />
      <>
        <Button style={{fontWeight: 'bold', margin: '5px'}} variant="primary" size="sm" onClick={handleIncrement}>증가시키기</Button>
        <Button style={{fontWeight: 'bold', margin: '5px'}} variant="primary" size="sm" onClick={handleReset}>리셋</Button>
      </>
      </>
  )
}

import React, { useState } from "react";
import Button from 'react-bootstrap/Button';
import Count from "../components/Count";


export default function App() {
  return (
    <>
    <Count />
    </>
  )
}

import React from 'react';
import { ScrollView } from 'react-native';
import ExamPicture from './components/ExamPicture';
import FlatListBasic from './components/ExamFlatListBasic';

export default function App() {
  return (
    <ScrollView>
      <ExamPicture />
      <FlatListBasic />
    </ScrollView>
  )
}

import React, { useState } from "react";
import { View, Image, TextInput, ActivityIndicator } from "react-native";

export default function ExamPicture() {
  const [loading, setLoading] = useState(true);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
      {loading && <ActivityIndicator size="large" color="#0000ff" />} {/* 로딩 중이면 로딩 표시 */}
      <Image
        source={{
          uri: 'https://picsum.photos/200/200',
        }}
        style={{ width: 200, height: 200, borderRadius: 100 }}
        onLoadEnd={() => setLoading(false)} // 이미지 로딩이 끝나면 로딩 상태 변경
      /><br />
      
    </View>
  );
}

import React, { useState } from "react";
import { StyleSheet, View, FlatList, Text, TextInput, TouchableOpacity } from "react-native";

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center", display: 'flex' },
  fruits: {
    height: 40, width: 200, borderColor: 'darkviolet', borderWidth: 1, textAlign: 'center', marginTop: 10,
    borderRadius: 20, color: 'lightcoral', fontSize: 20, padding: 5, height: 40
  },
  addButton: {
    marginLeft: 10, backgroundColor: 'lightcoral', padding: 10, borderRadius: 20
  },
  addButtonText: {
    color: 'white', fontSize: 15, fontFamily: 'verdana'
  },
});

export default function FlatListBasic() {
  const [fruitInput, setFruitInput] = useState('');
  const [fruits, setFruits] = useState([{ key: '사과' }, { key: '복숭아' }, { key: '수박' }]);

  const uploadFruit = () => {
    if (fruitInput.trim() !== '') { // 입력값이 비어있지 않은 경우에만 실행
      setFruits([...fruits, { key: fruitInput }]);
      setFruitInput(''); // 입력창 초기화
    }
  };

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <TextInput
          style={{
            height: 40,
            width: 200,
            borderWidth: 1,
            textAlign: 'center',
            marginTop: 10,
            borderRadius: 20,
            color: 'lightcoral',
            fontSize: 15,
            marginRight: 10,
            borderColor: 'lightcoral',
            fontFamily: 'verdana',
          }}
          placeholder="과일 이름을 입력하세요."
          value={fruitInput}
          onChangeText={(text) => setFruitInput(text)}
        />
        <TouchableOpacity style={styles.addButton} onPress={uploadFruit}>
          <Text style={styles.addButtonText}>과일 추가</Text>
        </TouchableOpacity>
      </View>
      <Text style={{ fontSize: 30, padding: 15, fontWeight: 'bold', color: 'darkviolet', fontFamily: 'verdana' }}>과일 Flat List</Text>
      <FlatList
        style={{ borderColor: 'coral' }}
        data={fruits}
        renderItem={({ item }) => <Text style={styles.fruits}>{item.key}</Text>}
      />
    </View >
  );
}