twitter props&states

종합퀴즈를 야무지게 망해버려서 트위터 과제에대한 의사코드작성을 해보려고한다.

사실 과제내부에 나머지페이지들은 이전 spa과제에서 이미다 적용됬던부분이기때문에
tweets부분에대한 내 의식의흐름(?)을 적어보고자한다.

tweets에서 구현해야하는기능은 트윗을 전송하고 전송시 새로운 트윗이 추가되야하는 기능을 구현하면된다.

// 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 [user, setUser] = useState('parkhacker');
const [msg, setMsg] = useState('');
const [tweets, setTweets] = useState(dummyTweets);

const handleButtonClick = (event) => {
const tweet = {
id: dummyTweets.length,
username: user,
content :msg,
createdAt : new Date().toLocaleDateString('ko-kr'),
updatedAt : new Date().toLocaleDateString('ko-kr'),

};
// TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
// 트윗 전송이 가능하게 작성해야 합니다.
setTweets([tweet, ...tweets])

};

->트윗순서twwet-> tweets

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

<리뷰하다보니 종합퀴즈에서본기분이든다? 물론맞췃지만>

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

<여기까지 필요한이벤트들이 어떻게 동작할건지 정의해줬다.>
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

            defaultValue={""}
            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">
              
              {'total: ' + tweets.length}
            </span>
          </div>
        </div>


        <div className="tweetForm__submit">
          <div className="tweetForm__submitIcon"></div>
          
          <button className="tweetForm__submitButton" onClick={handleButtonClick}>Tweet</button>
        </div>
      </div>
    </div>
  </div>


  <div className="tweet__selectUser"></div>
  <ul className="tweets">
    
    {tweets.map((el) => { 
      return (
        <Tweet tweet={el} />
      )})}

  </ul>
  <Footer />
</React.Fragment>

);
};

export default Tweets;

요렇게 이번과제를 어떤의식의흐름대로만들었는지 적어보았다.
이번 종합퀴즈를 풀면서느낀점은..문제를 잘읽자 의외로 실제만드는것과 개념은다르다라는것이다.
조금더 개념정리를 할필요가잇는듯하다..이상