[짜잘한 react] state를 통한 Input태그 관리

state를 통한 Input태그 관리 예시

fuction Test(){
	// 1. state 선언해주기
    const [Content, setContent] = useState("")
    
    //7. constantList state 선언해주기
    const [ContentList, setContentList] = useState([])
    
    //2. 버튼과 연동 alert창 띄워주기
    //5. alert에서 Content 확인도 가능
    //9. contentList에 써진 Content 추가하기
    const onSubemit = () =>{
	  	//alert(Content)
        let tempArr = [...ContentList]
        tempArr.push(Content)
        setContentList([...tempArr])
        // 초기화
        setContent('')
    }
    
	return (
    	<div>
        	//3. value값을 state값으로 설정
            //4. onChange 함수 설정, event값을 받아
            event.currentTarget.value를 사용하여 
            현재 input 내용을 받아올 수 있음
            //5. onChange 값에 event값을 받아서 
            value의 Content 현재 상황을 바꿔줌(setContent)
            
        	<input type='text' value={Content}
            onChange={(event)=>{
            	setContent(event.currentTartget.value)
            }}/>
            
            <button
            //2. 버튼 클릭하면 얼랏창 띄워주기
            onClick={()=>{
            	onSubmit()
            }}
            >제출</button>
            
            // 8. contentList 내용 아래에 map을 통해 뿌리기
            {ContentList.map((content, idx) => {
            	return <div key={idx}>{content} </div>
            })}
        </div>
    )
}