[짜잘한 react] 배열 추가 useState 사용 예시

배열에 버튼 클릭 시 1식 늘어난 수를 추가하는 배열로 만들어주기 예시

• state 사용하여 기존, Temp array 만들어주기
• map으로 Temp array 돌려주기
• 버튼에서 클릭을 하면, 새로운 빈값 array를 선언해주고
• 그 안에 현재 Temp array값을 전개연산자를 사용하여 넣어주기
• 그리고, 초기 숫자를 array에 push 해주기
• 다음 숫자를 setNumber로 올려주기
• Temp값을 array 전개 연산자를 사용해 배열로 새롭게 넣어주기 setTemp([...arr])

function Test(){
	const [Temp, setTemp] = useState([])
    const [Number, setNumber] = useState(0);
    return (
    	<div>
        	//useState 값 가져오기
        	{Temp.map((element, idx) =>{
           	return <p key={idx}>{element}</p>
            })}
            <button
            onClick={()=>{
            	let arr=[]
                // 현재 Temp 배열 가져오기
                // Temp에 바로 추가하는 것 불가
                arr =[...Temp]
                // Temp 배열에 추가
                arr.push(Number)
                setNumber(Number + 1)
                setTemp([...arr])
            }}
            >
            	증가
            </button>
    	</div>
    
    )
}