Bare Minimum Requirement

상세 컴포넌트 구현하기

Tweet 컴포넌트 (Tweet.js)

  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');

  return (
    <li className="tweet" id={tweet.id}>
      <div className="tweet__profile">
        <img src={tweet.picture} />
      </div>
      <div className="tweet__content">
        <div className="tweet__userInfo">
          <div className="tweet__userInfo--wrapper">
            <span className="tweet__username">{tweet.username}</span>
            <span className="tweet__createdAt">{parsedDate}</span>
          </div>								
        </div>
        <div className="tweet__message">{tweet.content}</div>
      </div>
    </li>
  );

// 이미지, 유저 이름, 트윗 생성 일자, 메시지 데이터 연결하기
// 내용이 들어가는 구간에 {tweet.데이터키}로 맞춰서 기입
// 생성일자는 날짜형식이 정해져 있어 상단에 추가된 변수로 대체
// 트윗 생성 날짜 변경 = new Date(tweet.key).toLocaleDateString('ko-kr');

페이지 컴포넌트 구현하기

MyPage 컴포넌트 (MyPage.js)

const filteredTweets = dummyTweets.filter(
    (tweet) => tweet.username === 'parkhacker'
  );
  return (
    <section className="myInfo">
      <div className="myInfo__container">
        <div className="myInfo__wrapper">
          <div className="myInfo__profile">
            <img src={filteredTweets[0].picture} />
          </div>
          <div className="myInfo__detail">
            <p className="myInfo__detailName">
              {filteredTweets[0].username} Profile
            </p>
            <p>28 팔로워 100 팔로잉</p>
          </div>
        </div>
      </div>
      <ul className="tweets__mypage">
        {filteredTweets.map((tweet) => {
          return <Tweet key={tweet.id} tweet={tweet} />;
        })}
      </ul>
      <Footer />
    </section>
  );

// parkhacker의 정보만 보이도록 dummyTweets.filter()
// 상단에 만든 변수를 이용해서 내용이 들어가는 구간에 {변수[0].key} 기입
// filteredTweets.map() 사용해서 ; props로 각 트윗의 정보전달
//

컴포넌트 하단에 추가

Tweets 컴포넌트 (Tweets.js)

{data.map((tweet) => <Tweet tweet={tweet} /> )}

// 주어진 데이터에 맞는 정확한 개수대로 보여줘야한다.
// map()사용 & useState 사용을 위해 만든 데이터 변수를 적용한다.

State, Props 활용 트윗 전송 Form 만들기

// 각각 필요한 곳에 onChange, onClick 속성 넣고 변수지정

  <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>
<button className="tweetForm__submitButton" onClick={handleButtonClick}>

// 유저이름
// onChange 이벤트 사용
// useState('초기값') -> parkhacker
// 변수값을 갱신하긴 위한 함수로 지정한 함수 사용
// event.target.value -> 이벤트가 사용되는 엘리먼트에 value값 가져오기

  const [username, setUsername] = useState('parkhacker');
  const handleChangeUser = (event) => {
    setUsername(event.target.value)
  }

// 트윗메세지
// onChange 이벤트 사용
// useState('초기값') -> ''
// 변수값을 갱신하긴 위한 함수로 지정한 함수 사용
// event.target.value -> 이벤트가 사용되는 엘리먼트에 value값 가져오기

  const [msg, setMsg] = useState('');
  const handleChangeMsg = (event) => {
    setMsg(event.target.value)
  }

// 입력버튼
// onClick 이벤트 사용
// useState('초기값') -> 연습용 더미데이터 변수(미리 최상단에 import로 불러오면서 지정해야함)
// 새로 가져오는 값을 넣어줄 새 tweet 내용 만들기
// 새 tweet을 기존 tweet들과 더해주기 (리스트에서 제일 먼저 올라와야함) -> 기존데이터 = ...tweets
// 변수값을 갱신하긴 위한 함수로 지정한 함수 사용 -> tweet들 더해준 새로운 배열로 넣어주기

  const [tweets, setTweets] = useState(dummyTweets);
  const handleButtonClick = (event) => {
    const tweet = {
      id: shortid(),
      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);
  };