리엑트 state 추가

1.filter

 // advanced filter
  const [filteredTweets, setFilteredTweets] = useState(tweets);
  const [isFiltered, setIsFiltered] = useState(false);

  let filteredUsername = tweets.map((ele) => ele.username);
  filteredUsername = filteredUsername.filter((v, i) => filteredUsername.indexOf(v) === i);
  // const filteredUsername = tweets.map(tweet => tweet.username); // 7 [parkhacker, undefined, ... ]
  
   const handleFilter = (event) => {
    console.log(event.target.value);
    if(event.target.value === 'All'){
      setIsFiltered(false);
      setTweets(tweets);
    }else{
      const filtered = tweets.filter(tweet => tweet.username === event.target.value);
      setIsFiltered(true);
      setFilteredTweets(filtered);
    }

  }
    <div className="tweet__selectUser">
        <select onChange={handleFilter}>
          <option>All</option>
          {filteredUsername.map((username, idx) => {
            return <option key={idx}>{username}</option>
          })}
        </select>
      </div>
      
       <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
          {isFiltered ? // isFiltered true일때는 filteredTweets (username과 일치하는) 렌더링
            filteredTweets.map(tweet => {
              return <Tweet tweet={tweet} key={tweet.id} handleDelete={handleDelete}></Tweet>
            })
          : tweets.map(tweet => { //// isFiltered false일때는 tweets 렌더링
            return <Tweet tweet={tweet} key={tweet.id} handleDelete={handleDelete}></Tweet>
          })
          }
      </ul>

필요한 부분만 가져왔다

선택창

1.먼저 select태그로 선택창을 만들어준다
2.option key={idx}(=value={}) 를 넣는다
3.{username}넣기

선언
1.usestate로 선언을 해주기 왜냐 변하는 값이기 때문이다.//state는 값을 변경하는 것이 아니라 갈아 끼운다고 생각하자!
2.handleFilter라는 이벤트를 정해준다
2-1. 만약 입력값이 all일땐 필터할 필요가 없으니 필터의 값은 false 나오는 트윗은 기본값이된다
setIsFiltered(false);
setTweets(tweets);
2-2 만약 필터가 된 것이면 filter를 써서 해당하는 트윗만을 불러온다

렌더링
1.위에까지 했다고 화면에 뜨는 것이 아니다 위에 것을 tweet으로 전달을 해줘야한다
2.삼항연산자를 이용해서 true면 필터된 값을 map해주고 아니면 전체 데이터를 map해준다