State & Props을 사용하여 Twittler 만들기

🌳 Tweet 버튼을 사용하여 작성된 글을 Tweeter의 가장 상단에 올리기

 

 

Twittler

 

 

가장 먼저 생각해봐야 하는 것은 Tweet버튼을 클릭했을 때, input과 textarea에 작성된 내용을 받는 방법이다. 이때 onClick 이벤트 처리 방식을 사용하여 새로운 데이터 객체를 만들어준 후, dummy data의 가장 앞부분에 넣어준다.

 

const handleButtonClick = () => {
    const getRandomNumber = (min, max) => {
      return parseInt(Math.random() * (Number(max) - Number(min) + 2));
    };

    const tweet = {
      id: users.length+1,
      username: userName,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: userMsg,
      createdAt: new Date().getTime()
    }

    setUsers([tweet, ...users]);
  };


<button onClick={handleButtonClick}>Tweet</button>

 

 

🌳 트윗 필터링 구현하기

 

Twittler

 

select태그 안에 username을 option태그를 만들어 넣어서 만든다. 이때 dummy data의 usernaem을 가져다가 만들면 되는데, 고려해야하는 것은 option 안에 username은 하나만 나오도록 해야한다. (동일한 username이 여러개여도 하나만 나오도록 해야한다.)

 

const [optionUserName, setOptionUserName] = useState('');
const [isOptionClick, setIsOptionClick] = useState(false);


const nameList = filterDrop.filter((a, b) => filterDrop.indexOf(a) === b);

 nameList.unshift('-- click to filter tweets by username --');

const options = nameList.map((option)=>{  
    return <option value={option} key={option}>{option}</option>
    })

const optionsFilt = nameList.map((option)=>{  
    if(option === optionUserName || option === '-- click to filter tweets by username --'){
     return <option value={option} key={option}>{option}</option>
    }
    })

const handleOptionChange = (event) => {
    if(event.target.value !== '-- click to filter tweets by username --'){
      setOptionUserName(event.target.value);
    }
    setIsOptionClick(!isOptionClick);
  }


<select onChange={handleOptionChange}>
    {isOptionClick ? optionsFilt : options}
</select>

 

Twittler

 

users에서 해당 username을 가지고 있는 data만 filter하여서 나열하도록 만든다. 이때 삼항조건문을 사용하여 option을 사용했을 때와 사용하지 않았을 때를 구별해서 화면에 렌더링되도록 해야한다.

 

const optionFilter = users.filter((data) => {
    return data.username === optionUserName;
  })


const filterData = optionFilter.map((data) => {
    return <Tweet tweet={data} key={data.id} onRemove={onRemove} />
  })


const fullData = users.map((data) => {
    return <Tweet tweet={data} key={data.id} onRemove={onRemove}/>
  })



<ul className="tweets">
   {isOptionClick ? filterData : fullData }
</ul>