추가, 삭제, 갱신-hook

추가

📗 App.js

import { initialState } from "./assets/state";
import Add from "./pages/Add";

function App(){
  	const [base, setBase] = useState(initialState);
	const [array, setArray] = useState([]);
  
  	return (
    	<Add
          base={base}
          array={array}
          setArray={setArray}
        ></Add>
    )
}

📗 Add.js

function Add({base, array, setArray}){
	const addClick = (idx) =>{
    	if(!array.filter((el) => el.id === idx)[0]){
        	setArray([...array, {id:idx, count:1}]);
        }
    }
    
    return (
    	<div className="box">
        	{base.map((item, idx) => (
        		<div key={idx}
                  onClick={()=>addClick(idx)}
                >{item}</div>
        	))}
      	</div>
    );

}

삭제

📗 App.js

import { initialState } from "./assets/state";
import Remove from "./pages/Remove";

function App(){
	const [base, setBase] = useState(initialState);
	const [array, setArray] = useState([]);
  
  	return (
    	<Remove
          base={base}
          array={array}
          setArray={setArray}
        ></Remove>
    )
}

📗 Remove.js

function Remove({base, array, setArray}){
	const removeClick = (idx) =>{
    	setArray(array.filter((el) => el.id !== idx));
    }
    
    return (
    	<div className="box">
        	{base.map((item, idx) => (
        		<div key={idx}
                  onClick={()=>removeClick(idx)}
                >{item}</div>
        	))}
      	</div>
    );

}

갱신

📗 App.js

import { initialState } from "./assets/state";
import Renew from "./pages/Renew";

function App(){
	const [base, setBase] = useState(initialState);
	const [array, setArray] = useState([]);
  
  	return (
    	<Renew
          base={base}
          array={array}
          setArray={setArray}
        ></Renew>
    )
}

📗 Renew.js

function Renew({base, array, setArray}){
	const renewChange = (count, id) =>{
    	setArray(array.map((el) => {
        	if(el.id === id){
               return {id, count}
            }else{
               return el;
            }
        }));
    }
    
    return (
    	<div className="box">
        	{base.map((item, idx) => (
        		<div key={idx}>
            		<input onChange={(e)=>
        				renewChange(e.target.value, idx)
                    }/>
          		</div>
        	))}
      	</div>
    );

}