JS => useState와 이벤트 핸들러 간단 활용

useState와 이벤트 핸들러를 활용한 트윗 데이터 생성

버튼을 누르면 새로운 트윗 데이터 업로드

const Tweets = () => {
<br>
  const [tweets, settweets] = useState(dummyTweets)
<br>  
  const getRandomNumber = (min, max) => {
    return parseInt(Math.random() * (Number(max) - Number(min) + 2));
  };
<br>
  const handleButtonClick = () => {
<br>
    const newtweet =  { 
      id: tweets.length+1,
      username: name,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: msg,
      createdAt: '2019-02-24T16:17:47.000Z',
      updatedAt: '2019-02-24T16:17:47.000Z',
    }
<br>
    settweets([newtweet, ...tweets]) // 구조분해 활용
  };
<br>
  ㆍ
  ㆍ
  ㆍ
  return (
    생략
  ㆍ
  ㆍ
    <button
      onClick={handleButtonClick} // button 태그에 onClick
      className="tweetForm__submitButton">Tweet</button>
  ㆍ
  ㆍ
    생략
    )

위 코드에서 useState를 활용하여
컴포넌트의 기존 트윗데이터들을 상태 관리하고 있다.

const [tweets(초기 상태), settweets] = useState(dummyTweets(초기 데이터)

그리고 이벤트 핸들러 함수를 활용하여,
newtweet이라는 새로운 데이터를 만들어주고,
아래처럼 데이터의 상태값을 변경해준다.

settweets([newtweet, ...tweets])