문제
react를 이용해서 새로운 tweet {} 객체가 추가 되었을 때 usestate를 이용하여 기존 배열에 넣는 방법
기존코드
const [userName,setUserName]=useState('')
const [message, setMessage]=useState('')
const handleChangeMsg = (event) => {
// TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
setMessage(event.target.value)
};
const handleChangeUser = (event) => {
// TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
setUserName(event.target.value)
};
let nextId=useRef(6)
const handleButtonClick = (event) => {
// TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
let newtweet={
id: nextId.current,
username: userName,
picture: `https://randomuser.me/api/portraits/men/98.jpg`,
content: message,
createdAt: new Date().toLocaleDateString('ko-KR'),
updatedAt: new Date().toLocaleDateString('ko-KR'),
}
nextId +=1
setMessage('')
setUserName('')
dummyTweets.unshift(newtweet)
return dummyTweets
};
수정 코드
// TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
const [userName,setUserName]=useState('Parkhacker')
const [message, setMessage]=useState('')
const [tweets, setTweets]=useState(dummyTweets)
const handleChangeMsg = (event) => {
// TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
setMessage(event.target.value)
};
const handleChangeUser = (event) => {
// TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
setUserName(event.target.value)
};
const tweet={
id: 0,
username: userName,
picture: `https://randomuser.me/api/portraits/men/98.jpg`,
content: message,
createdAt: new Date().toLocaleDateString('ko-KR'),
updatedAt: new Date().toLocaleDateString('ko-KR'),
}
const newTweets= [tweet, ...tweets]
setTweets(newTweets)
setMessage('')
setUserName('')
console.log("tweet버튼이 잘 작동합니다")
};
{/*새로운 객체가 추가 될 때마다 기존에 배열이 계속 바뀐다(state 상황?!)
state를 정의 후 새로운 객체가 추가 될 때마다 배열을 수정하는 함수를 정의 하면 끝
*/}
<ul className="tweets">
{/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
{tweets.map(tweet=>{
return <Tweet tweet={tweet}/>
})}
</ul>
{/*map의 장점은 기존의 배열의 요소들을 이용하여 다른 형태로 바꿀 수 있다. JSX문법에 따라 기존에 만들어진 <Tweet/> 컴퍼넌트를 재사용할 수 있는 것을 떠올르고
거기에 새로운 변수의 데이터를 넣어주면 굳이 다시 html를 만들 필요가 없다.*/}
export default Tweets;
깨달은 점
1. 기존 배열을 바꿀 때는 unshift, push 와 같은 배열의 기존 함수들을 사용할 수 있다. 하지만 react 문법을 생각해볼 때 배열이 자주 변한다는 것은 데이터가 변한다는 의미이고 이는 데이터를 useState() 로 정의할 때 더 쉽게 바꿀 있다. 이벤트가 발생하고 함수가 실행이 되면 set함수가 새로운 인자를 받고 이를 자동으로 기존 데이터로 바꿔준다. 이렇게하면 기존 dummy 데이터는 변하지 않고 사용할 수 있다.
'리액트' 카테고리의 다른 글
react 의 원리 (0) | 2021.12.09 |
---|---|
useState #2 숫자 데이터 count하기 (0) | 2021.09.08 |
useState 사용하여 데이터 추가 및 삭제하기 (0) | 2021.09.08 |
react 처음 시작할 때!! 참고 (0) | 2021.09.02 |