React, Select, Option

Select를 이용해서 필터링 목록 만들기

  const [data, setData] = useState(dummyTweets);
  const [isFiltered, setisFiltered] = useState(false);
  const [filteredTweets, setFilteredTweets] = useState(dummyTweets);


  const handleFilter = (event) => {
      if(event.target.value === 'cola'){ 
		//value가 cola이면 필터되지 않은 트윗들이 나와야한다.
        setData(data); 
        setisFiltered(false);
      } else {
        //cola가 아니라면 유저네임으로 필터된 트윗이 나와야한다.
        const filtered = data.filter((tweet)=>tweet.username === event.target.value)
        setisFiltered(true);
        setFilteredTweets(filtered);
      }
     }
  

  
  <select onChange={handleFilter}>
       <option value="cola">-- click to  filter --</option>
       {filterUsername.map((el, idx) => {
       return(
              <option value={el} key={idx}>{el}</option>
              )
            })}
  </select>


	<ul className="tweets">
        { isFiltered? 
          filteredTweets.map((tweet, idx) => <Tweet tweet={tweet} key={tweet.id} handleDlete={handleDlete} idx={idx} />
          ) 
          :
          data.map((tweet, idx) => <Tweet tweet={tweet} key={tweet.id} handleDlete={handleDlete} idx={idx} />
          )}  //맵을 이용해서 셀렉된 조건에 맞게 뿌려준다.
 	</ul>

오늘의 기분

어제 말했던 페어님 npm 에러가 오늘까지도 해결되지 않아서 페어님과는 베어미니멈 테스트까지 하고 페어님께 에러를 해결할 시간을 드렸다.

그래서 나는 오늘 어드밴스 테스트인 필터 목록을 만드는데 하루를 소비했다.
변하는 값(state)를 어떤 부분으로 생각하고 코드 작성하는게 가장 먼저 할 일인것 같다.

완벽하게 이해한 것은 아니다. 베어 미니멈까진 얼추 이해를 했지만 돌아오는 주말에 어드밴스 테스트는 꼭 다시 풀어봐야할 것 같다.

추가로 개인적인 작은 프로젝트로 고양이 mbti만들기를 시작했다.