[React] 간단실습.02 (장바구니, 타이머, 색깔상자)

 

 

 

1. 장바구니

입력 창에 장바구니에 넣을 것을 적어서 추가하기

완료 항목은 체크 / 삭제 가능

 

▼ ver.1 체크

import React, {useState} from "react";

const ListItem = ({id, text, input}) => {
    return (
        <p>
            <li key={id}> 
                <input type="checkbox" value={input} /> {text}
            </li> 
        </p>
    )
};

const ListSet = ({data}) => {
    return (
        <ul style={{listStyle:'none'}}>
            {data.map((item) => (
                <ListItem key={item.id} id={item.id} text={item.text}  />
                ))}
            
        </ul>
    );
};

const Cart = () => {

    const [items, setItem] = useState([]);
    const [input, inputValue] = useState('');

    const handleChange = (event) => {
        inputValue(event.target.value);
    };

    const handleAdd = () => {
        const newItem = {id: items.length+1, text: input};
        setItem([...items, {text: input, completed: false}]);
        inputValue('');
    };

    return (
        <>
            <h2> [장바구니 ver.1] </h2>
            <input type="text" value={input} onChange={handleChange} />
            <button onClick={handleAdd}> add! </button>
            <ListSet data ={items} />
        </>
    )
}

export default Cart;

 

▼ ver.2 체크 / 삭제

import React, {useState} from "react";

function CartLast() {
    const [cart, setCart] = useState([]);
    const [input, inputValue] = useState('');

    const addCart = () => {
         setCart([...cart,{text : input, completed : false}]);
         inputValue('');
    };

    const checkCart = (index) => {
        const checkList = [...cart];
        checkList[index].completed = !checkList[index].completed;
        setCart(checkList);
    };

    const deleteCart = () => {
        const newCart = cart.filter((cart) => !cart.completed);
        setCart(newCart);
    };

    return (
        <>
        <h2> [장바구니 ver.2] </h2>
            <input type="text" value={input} onChange={(e) => inputValue(e.target.value)}/>
            <button onClick={addCart}> 추가 </button>
            <ul style={{listStyle: 'none'}}>
                {cart.map((item, index)=>(
                    <li key = {index}>
                        <label style={{textDecoration: item.completed ? 'line-through' : 'none'}}>
                            <input type="checkbox" checked={item.completed} onChange={() => checkCart(index)}/>
                            {item.text}
                        </label>
                    </li>
                ))}
            </ul>
            <button onClick={deleteCart}> delete! </button>
        </>
    )
};

export default CartLast;

 

 

 

2. 타이머

시작, 일시정지, 중지 만들어서 초 세기

interval / pref_hooks 사용

import React, { useState, useEffect } from 'react';

function Timer() {

    const [startTime, setStartTime] = useState(0); // 실제 시간
    const [elapsedTime, setElapsedTime] = useState(0); //화면에서 보일 시간
    const [isRunning, setIsRunning] = useState(false);

    useEffect(() => {
        let intervalID;

        if(isRunning) {
            setStartTime(performance.now() - elapsedTime*1000);
            intervalID = setInterval(() => {
                const currentTime = performance.now();
                setElapsedTime(Math.floor((currentTime-startTime)/1000));
            }, 1000);
        }

        return () => { //side-effect 처리
            clearInterval(intervalID);
        }
    }, [isRunning])

    const startTimer = ()  => {
        if(!isRunning) {
            setIsRunning(true);
            setStartTime(performance.now() - elapsedTime*1000);
        }
    };

    const pauseTimer = ()  => {
        if(isRunning) {
            setIsRunning(false);
        }
    };

    const stopTimer = ()  => {
        setIsRunning(false);
        setStartTime(0);
        setElapsedTime(0);
    }

    return (
        <>
            <h2> [타이머!] </h2>
            <p> 시간: {elapsedTime}초 </p>
            <button onClick={startTimer}> ▶ </button>
            <button onClick={pauseTimer}> ∥ </button>
            <button onClick={stopTimer}> ■ </button>
        </>
    )

}

export default Timer;

 

 

 

3. 페이지 넘길 수 있는 상자

색깔 랜덤으로 지정

App.js

import './App.css';
import Book from './Book';

function App() {

  const data = [
    {id:1, text:':P'},
    {id:2, text:':D'},
    {id:3, text:':X'},
  ]
  const page = 1;
  
  
  return (
    <div>
      <Book data={data} itemPerPage={page} />
    </div>
  );
  
}

export default App;

 

Book.js

import React, {useState, useEffect} from "react";

function Book({data, itemPerPage}) {
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPage, setTotalPage] = useState(data.length);
    const [color, setColor] = useState(''); //사용자가 바꿀수도 있으니까

    useEffect(() => {
        if(data.length > 0) {
            setTotalPage(data.length);
        }
        setColor(randomColor()); // 페이지 색 바꿔조
    }, [data.length, currentPage]); // 길이가 바뀌거나 페이지가 바뀌면

    const handlePrevPage = () => {
        if(currentPage > 1) {
            setCurrentPage(currentPage -1);
        }
    }

    const handleNextPage = () => {
        if(currentPage < totalPage) {
            setCurrentPage(currentPage +1);
        }
    }

    function randomColor () {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }

    return (
        <>
            <h2> [페이지를 넘겨보자] </h2>
            <div style={{backgroundColor: color, width:'182px', height:'200px', display:'flex', justifyContent:'center', alignItems:'center'}}>
                {data[currentPage-1].text}
            </div>
            <div>
                <button onClick={handlePrevPage} disabled={currentPage === 1}> 이전 </button>
                <span> {`페이지: ${currentPage} / ${totalPage}`} </span>
                <button onClick={handleNextPage} disabled={currentPage === totalPage}> 다음 </button>
            </div>
        </>
    );

}

export default Book;