fe-sprint-react-twittler-state-props-refernce 수도코드 작성해보기

import React, { useState } from 'react';

import Footer from '../Footer';

import Tweet from '../Components/Tweet';

import './Tweets.css';

import dummyTweets from '../static/dummyData';

import shortid from 'shortid';

const Tweets = () => {

const [username, setUsername] = useState('parkhacker');

const [msg, setMsg] = useState('');

const [tweets, setTweets] = useState(dummyTweets);

const [filteredTweets, setFilteredTweets] = useState(dummyTweets);

const [isFiltered, setIsFiltered] = useState(false);

const [currentUsername, setCurrentUsername] = useState('default');

// const[state 저장변수, state 갱신함수] = useState(state 초기값)

const handleButtonClick = (event) => {

const tweet = {

id: shortid(),

// id: dummyTweets.length++를 써도 통과된다.

username: username,

picture: 'https://randomuser.me/api/portraits/men/98.jpg',

title: 'new Tweet',

content: msg,

createdAt: new Date().toLocaleDateString('ko-KR'),

updatedAt: new Date().toLocaleDateString('ko-KR'),

};

const newTweets = [tweet, ...tweets]; // 새로운 트윗이 앞에 오도록.

setTweets(newTweets);

}; // handleButtonClick 함수가 실행되면 새로운 트윗이 앞에 붙는다. onClick

const handleChangeUser = (event) => {

setUsername(event.target.value)

}

const handleChangeMsg = (event) => {

setMsg(event.target.value)

}

//입력값의 state를 관리하는 갱신함수. onChange

const handleFilterTweet = (event) => {

if (event.target.value === 'default') {

setTweets(tweets);

setIsFiltered(false);

} else {

const filtered = tweets.filter(

(tweet) => tweet.username === event.target.value

);

setIsFiltered(true);

setFilteredTweets(filtered);

}

setCurrentUsername(event.target.value);

};

// 잘 이해가 안되는 부분. 더 공부해보자.

const handleDeleteTweet = (username, deleteIndex) => {

if (isFiltered) {

alert('필터 시 삭제 불가합니다.')

return;

}

const restTweets = tweets.filter((tweet, idx) => idx !== deleteIndex);

setTweets(restTweets);

};

// 잘 이해가 안되는 부분. 더 공부해보자.

const handleAllTweetButton = (event) => {

setIsFiltered(false);

// setTweets(tweets);

setCurrentUsername('default');

};

const tweetsRenderer = (tweet, idx) => {

return (

<Tweet

key={tweet.id}

tweet={tweet}

handleDeleteTweet={handleDeleteTweet}

idx={idx}

/>

);

}

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"

value={username}

onChange={handleChangeUser}

placeholder="your username here.."

className="tweetForm__input--username"

></input>

<textarea

value={msg}

onChange={handleChangeMsg}

placeholder="your tweet here.."

className="tweetForm__input--message"

></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>

{/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}

<button className="tweetForm__submitButton" onClick={handleButtonClick}>

Tweet

</button>

</div>

</div>

</div>

</div>

<div className="tweet__selectUser">

<select value={currentUsername} onChange={handleFilterTweet}>

<option value="default">

-- click to filter tweets by username --

</option>

{tweets.reduce((acc, cur) => {

const isNotUnique = acc.reduce((a, c) => {

if (c.username === cur.username) {

return true

}

return a === true ? true : false

}, false)

return isNotUnique ? acc : [...acc, cur]

}, []).map((tweet) => {

return (

<option key={tweet.id} value={tweet.username}>

{tweet.username}

</option>

);

})}

</select>

{currentUsername !== 'default' ? (

<button onClick={handleAllTweetButton}>

<i className="far fa-caret-square-left"></i>

</button>

) : (

<div></div>

)}

</div>

<ul className="tweets">

{isFiltered ? filteredTweets.map(tweetsRenderer) : tweets.map(tweetsRenderer)}</ul>

<Footer />

</React.Fragment>

);

};

export default Tweets;