S2U6 React State & Props

Tweets.js

// TODO : useState를 react로 부터 import 합니다.
import React, { useState } from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './Tweets.css';
import dummyTweets from '../static/dummyData';

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  
  //사진 랜덤으로 돌리기
  const getRandomNumber = (min, max)=>{
    return parseInt(Math.random()*(Number(max)-Number(min)+2));
  }
  
  
  const [user, setUser] = useState(''); 
  const [msg, setMsg] = useState('');
  const [tweets, setTweets] = useState(dummyTweets);


  const handleButtonClick = (event) => {
    const tweet = {
      id : dummyTweets.length,
      username: user,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: msg,
      createdAt: new Date().toLocaleDateString('ko-kr'),
      updatedAt: new Date().toLocaleDateString('ko-kr'),
    };
    //Tweet button 엘리먼트 클릭시 작동하는 함수
    // 트윗 전송 가능
    setTweets([tweet,...tweets]) //작성한 트윗을 맨위로 보내기 위해서 tweet을 먼저 씀
  };



  const handleChangeUser = (event) => {
    //Tweet input 엘리먼트에 입력 시 작동하는 함수
    setUser(event.target.value)
  };



  const handleChangeMsg = (event) => {
    //Tweet textarea 엘리먼트에 입력 시 작동하는 함수
    setMsg(event.target.value)
  };



  return (
    <React.Fragment>
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">
                <input
                  type="text"
                  defaultValue="parkhacker"
                  value={user}
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange={handleChangeUser} 
                ></input>
                <textarea 
                  type="text"
                  placeholder='your message here...'
                  className='tweetForm__input--message'
                  onChange={handleChangeMsg}
                  value={msg}></textarea>
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
                  {'total: ' + Tweets.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              <button className='tweetForm__submitButton' onClick={handleButtonClick}>tweet</button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {tweets.map((tweet)=>{
          return (<Tweet tweet = {tweet}/>)
        })}
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;