filter() & map()

Q. 1
filter method를 이용하여 username이 kimcoding인 요소만 있는 배열을 filteredTweet에 할당한다.

const MyPage = () => {
  /* 처음 주어진 코드
  const filteredTweets = dummyTweets 
  --> */
  const filteredTweets = dummyTweets.filter(
    (tweet)=> tweet.username === "kimcoding"
  );
... 
};

dummyTweets에 filter method를 실행시킨다.
--> filter는 (tweet)이라는 값에서 tweet.username 이 'kimcoding' 인 값을 필터링 해서 가져온다.

Q. 2
my page를 눌렀을 때 kimcoding의 tweet만 나오도록 만들어라.

      <ul className="tweets__mypage">
        {filteredTweets.map((tweet) => {
          return (
            <li className="tweet" id={tweet.id} key={tweet.id}>
              <div className="tweet__profile">
                <img src={tweet.picture} />
              </div>
              <div className="tweet__content">
                <div className="tweet__userInfo">
                  <span className="tweet__username">{tweet.username}</span>
                  <span className="tweet__createdAt">{tweet.createdAt}</span>
                </div>
                <div className="tweet__message">{tweet.content}</div>
              </div>
            </li>
          );
        })}
      </ul>

filteredTweets.map((tweet) => {
return ( ... )})

은 filteredTweets에 map() method를 실행한다. 여기서 변수 tweet에 관한 내용을 for loop 과 같이 반복 작동한다.


아래쪽에 id = {tweet.id} 는 tweet 즉 kimcoding의 id 이며, key={tweet.id} 또한 마찬가지 이다.


즉 map() method 는 filteredTweets 에서 tweet 에 해당하는 정보를 searching 해서 return 값에 할당해주는 역할을 한다. (고 생각한다.)

아무리 봐도 map() 과 filter() 는 익숙해지지 않는듯..

+@)

/* dummyTweet의 형식 */
const dummyTweets = [
  {
    id: 1,
    username: 'kimcoding',
    picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
      1,
      98
    )}.jpg`,
    content:
     내용1 - 생략
    createdAt: getParsedDate('2022-02-24T16:17:47.000Z'),
    updatedAt: getParsedDate('2022-02-24T16:17:47.000Z'),
  },
  {
    id: 2,
    username: '예제 이름2',
    picture: `https://randomuser.me/api/portraits/men/${getRandomNumber(
      1,
      98
    )}.jpg`,
    content:
      내용2 - 생략
    createdAt: getParsedDate('2022-02-25T16:17:47.000Z'),
    updatedAt: getParsedDate('2022-02-25T16:17:47.000Z'),
  },
  {
    id: 3,
    username: '예제 이름3',
    picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
      1,
      98
    )}.jpg`,
    content:
      내용3 - 생략
    createdAt: getParsedDate('2022-02-26T16:17:47.000Z'),
    updatedAt: getParsedDate('2022-02-26T16:17:47.000Z'),
  },