[React]Twittler Tweet필터, 삭제

기존 Twittler state&props에 select, option 태그를 이용하여 tweet필터와, 삭제 기능을 추가 구현했습니다.
Tweets.js 와 Tweet.js 파일만 수정했으므로 다른 파일은 전 게시물을 참고하시기 바랍니다.

Tweet.js

import React from 'react';
import './Tweet.css';

const Tweet = ({ tweet, handleDeleteTweet, index }) => {
  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');

  return (
    <li className="tweet" id={tweet.id}>
      <div className="tweet__profile">
        <img src={tweet.picture} />
      </div>
      <div className="tweet__content">
        <div className="tweet__userInfo">
          <div className="tweet__userInfo--wrapper">
            <span className="tweet__username">{tweet.username}</span>
            <span className="tweet__createdAt">{parsedDate}</span>
          </div>
          <div className="tweet__userInfo--buttonWrapper">
            <button className="tweet__deleteButton" onClick={() => handleDeleteTweet(tweet.username, index)}>
              <i className="far fa-trash-alt"></i>
            </button>
          </div>
        </div>
        <div className="tweet__message">
          {tweet.content}
        </div>
      </div>
    </li>
  );
};

export default Tweet;

Tweet 컴포넌트에 handleDeleteTweet와 index 인자 값을 추가하고 삭제 버튼을 만듭니다.
handleDeleteTweet과 index 값을 onClick메소드에 적용시킵니다.

Tweets.js

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

const Tweets = () => {
  const getRandomNumber = (min, max) => {
    return parseInt(Math.random() * (Number(max) - Number(min) + 2));
  };
  const [tweets, setTweets] = useState(dummyTweets);
  const [user, setUser] = useState('parkhacker');
  const [msg, setMsg] = useState('');
  const[filteredTweets, setFilteredTweets] = useState([]);
  const[isFiltered, setIsFiltered] = useState([]);
  const[currentUsername, setCurrentUsername] = useState("default");

  const handleSelectUser = (event) => {
    const newEvent = event.target.value;

    if(newEvent === "show all tweets"){
      setIsFiltered(false)
    }else{
      const filterTweets = tweets.filter((el) => el.username === newEvent)
      setFilteredTweets(filterTweets)
      setIsFiltered(true)
    }
  }
  
  const handleDeleteTweet = (username, deleteIndex) => {
    if(isFiltered) {
      alert("필터 시 삭제 불가합니다.");
      return;
    }
    const restTweets = tweets.filter((tweet, index) => index !== deleteIndex);
    setTweets(restTweets);
  };
  

  const tweetsRenderer = (tweet, index) => {
    return(
      <Tweet
      key={tweet.id}
      tweet={tweet}
      handleDeleteTweet={handleDeleteTweet}
      index={index}/>
    );
  };
 

  const handleButtonClick = (event) => {
    const tweet = {
      id: dummyTweets.length + 1,
    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'),
    };
    setTweets([tweet, ...tweets])
  };

  const handleChangeUser = (event) => {
    setUser(event.target.value)
  };

  const handleChangeMsg = (event) => {
    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"
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange={handleChangeUser}
                ></input>
                <textarea
                  defaultValue={""}
                  placeholder="message here.."
                  className="tweetForm__input--message"
                  onChange={handleChangeMsg}>
                  </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>
      <select onChange={handleSelectUser}>
        <option>show all tweets</option>
        {tweets.reduce((acc, cur) => {
          if(acc.includes(cur.username)){
            return acc;
          }else{
            acc.push(cur.username)
            return acc;
          }
        }, []).map((el, index) => {
          return <option key={index}>{el}</option>
        })}
      </select>
      <ul className="tweets">
       {/* {tweets.map((el) => {
          return <Tweet tweet={el} />
        })} */}
        {isFiltered ? filteredTweets.map(tweetsRenderer) 
        : tweets.map(tweetsRenderer)}
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;

handleDeleteTweet에서 필터가 됐을 시에 삭제가 불가하다는 경고창이 뜨게하였고,
tweet목록을 렌더링 시킬 tweetsRenderer에서 Tweet컴포넌트를 불러온다. 이때, key값과 출력할 tweet목록과 삭제버튼 index값을 속성으로 불러와야한다.
select와 option태그를 이용하여 필터시킬 select목록을 만들고 onChange메소드를 사용해 필터목록에 있는 사용자의 변화를 감지한다.