2021년 5월 3일 코드스테이츠 DAY-29 React(unshift가 아닌 useState를 통한 정보의 최신화 그리고 select tag를 통한 filter된 정보만 보여주기)

2021년 5월 2일 React State & Props 예습(이벤트 핸들링을 통한 정보 전달 + ubuntu npm run test / npm run start (

위 어제 일자로 된 글을 보면 

 

unshift로 새롭게 만든 tweet을 넣은것이 실제로 tweet창에는 정상적으로 추가 되었으나, 

 

testcase는 통과하지 못했음을 언급했었다. 

 

해결방법은 결국에 useState의 set함수로 기존 dummyTweet에 새로운 tweet을 추가하여 다시 세팅해주는 것이었다. 

 

이는 일종의 기존 데이터를 복사하는 것임을 의미하는데  일단

 

코드를 보자. 

 

  const [data, setData] = useState(dummyTweets); 
  //data변수의 초기값에 dummyTweets를 넣어주었다.(data를 복사하는 역할)
  const [name, setName] = useState('');
  const [sentence, setSentence] = useState('');
  
  const handleButtonClick = () => {
    
    const tweet = {};
    
    tweet.id = data.length + 1;
    tweet.username = name;
    tweet.content = sentence;
    //트윗에 정보를 더 채우면 좋지만 일단 기능구현에 집중하였다.
    
    setData([...data, tweet]) // 기존데이터에 새로운 tweet을 추가하여 data를 바꾸어주는 작업을 하는 것
  };
  
  

 

이렇게 Bare Minimum Request는 끝이났다.

 

하지만 여기서는 만족할 수가 없는것. 

 

select태그를 넣어 옵션을 넣어주고 옵션을 선택하면

 

해당하는 것만 화면에 출력 되도록 하는 advanced 과제 또한 도전하게 되었다. 

 

구현방법은 아래와 같다. 

const [choice, setChoice] = useState('')

  const filteredData = data.filter((tweet)=>{
    if(choice === ''){
      return true
    }else{
      return tweet.username === choice;
    }
  })

//select옵션 중에 아무것도 특정하지 않았을때는 전체가 나오도록 filter 속 if문에 return true를 넣어주었고,
//무엇을 특정하였을 때는 그것과 기존 data의 username이 일치하는 것만 filter되어 나오도록 조건을 작성하였다. 

  const options = data.map(function(tweet){
    return <option value={tweet.username}>{tweet.username}</option>
  }); //select에 들어갈 option을 설정해주는 부분이다. tweet한 사람들의 이름을 넣어줘야하기에 data에서 이름만 불러와 map해주었다.
  
  const handleSelectUser = (event) => {
    setChoice(event.target.value);
    console.log(event.target.value)//특정한 유저의 이름이 출력된다. 이는 value를 choice한 사람으로 set해줬기 때문
  }
  
//------------------------------------------------------------------------------------
//return문의 select tag가 들어가는 곳 

<select value={choice} onChange={handleSelectUser}>
  <option value=''>-- click to filter tweets by username --</option> 초기상태('')일때의 option을 만들어 주었다.
  {options} //return문 밖에서 작성한 options를 불러왔다.
</select>



        {filteredData.map((tweet)=>{ 
          return <Tweet key={tweet.id} tweet={tweet} />
        }).reverse()}
        
 //특정된 혹은 특정되지 않은 data인 filteredData를 map해주어 화면에 나타나게 하는 부분

이 문제들을 풀면서 useState에 대한 다양한 접근 방법을 알 수 있었다. 

 

react는 알면 알수록 더 공부해야될 것이 많은 분야다. ㅠㅠ

 

그래도 조금씩 내가 원하는 것들을 만들어 낼 수 있을것 같은 기분이 든다.