(야자)[React] React State & Props과제

오늘은....종합퀴즈 9문제중 3개나 틀려버려서 야자반에 걸렸다....
분명 다 풀 수 있는데 아침에 몽롱한 상태에서 뇌빼고 푼거같다.ㅠㅠ

⭐️ 야간 자율 학습 과제
[필수] - React Twittler State & Props 과제 레퍼런스의 의사코드를 작성하여 블로깅 하세요.

Tweets

const Tweets = () => { 
  const [tweets, setTweets] = useState(dummyTweets);
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  
   //트윗 작성 함수

  const handleButtonClick = (event) => {
    if (username && message) { //값이 있는 경우
      const newTweet = {       //새로운 트윗 객체 생성
        id: tweets.length + 1, //새로운 고유 아이디
        username: username,
        picture: 'https://randomuser.me/api/portraits/men/98.jpg',
        content: message,
        createdAt: new Date().toISOString(),   //yyyy.mm.dd로 반영
        updatedAt: new Date().toISOString(),
      }; 

      setTweets([newTweet, ...tweets]); //기존 트윗에 추가
      
      setUsername('');   //입력값 초기화
      setMessage('');
    }
  };
   //트윗 삭제
  const handleDelete = (tweetId) => {
    const updatedTweets = tweets.filter((tweet) => tweet.id !== tweetId); 
    //삭제할 트윗을 제외
    
    setTweets(updatedTweets);
  };
  //유저네임 입력
  const handleChangeUser = (event) => {
    setUsername(event.target.value);
  };
  //메세지 입력
  const handleChangeMsg = (event) => {
    setMessage(event.target.value);
  };

Tweet

const Tweet = ({ tweet, onDelete }) => { //컴포넌트 정의
  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');
  
   // 트윗 삭제 핸들러 함수
  const handleDelete = () => {
    onDelete(tweet.id);  // onDelete 콜백 함수 호출 > 트윗 ID 전달 > 삭제 요청
  };

나머지는 저번시간에 했던 부분이기에 제외, 종합퀴즈 3문제...

import React, { useState } from "react";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = () => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    if(1._______ === false) { //갱신변수가 아닌 저장변수인 showPopup의 상태가 바껴야 한다.
      2._______ (true) //이제 sethowSPopup변수를 호출해서 갱신.
    } else {
      2._______ (false)
    }
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" 3._______ >Open me</button>
      //버튼에 있는 onClick={togglePopup}함수를 넣어야 함.
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}