✅ TIL

---

React States & props 의 개념

쇼핑몰에서 옷을 주문한다고 해보자.

그런데 원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 드는게 아닌가...
바로 장바구니에 담은 옷을 빼고, 새로운 옷을 담아 결제를 한다.

이 상황에서 장바구니에 담기는 옷은 바뀌고 내가 결제해야 할 금액도 즉각적으로 변경된다.

이를 우리는 장바구니의 상태가 변한다고 말할 수 있으며, 결제 페이지에 변경된 장바구니의 상태를 전달해야 한다.

이것이 State와 Props에 대한 프롤로그이고, 이제 자세히 알아보자.

Props

• 컴포넌트의 속성(property)을 의미한다.
  이전 State & Props Intro에서 잘 설명되었듯, props는 성별이나 이름처럼
  변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다.
  React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아
  이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
  따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.
• 객체 형태이다.
  props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.
• props는 읽기 전용이다.
  props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다.
  그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다.

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배된다.

How to use props

props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있다.

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

import "./styles.css";

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

props.children

props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있다.
이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있다.

import "./styles.css";

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
      <Learn>{itemOne}</Learn>
      <Learn>{itemTwo}</Learn>

    </div>
  );
};

const Learn = (props) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return <div className="Learn">
  <p>{props.children}</p></div>;
};

export default App;

State

---

애플리케이션의 "상태"

State & Props 영상에서 state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 했다.

실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까? 쇼핑몰 장바구니를 예로 들어보겠다.
사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다.

이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다.

체크박스를 코드로 구현해 보면 아래와 같다.

아래 예시에서는 단순히 체크된 상태에 따라 보이는 글씨가 달라지지만,
이를 쇼핑몰에 적용하면 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고, 이에 따라 사용자의 화면 또한 달라진다.

이처럼 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 한다.

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

State hook, useState

---

useState 사용법

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다.
이 함수의 사용 방법과 작동 방식을 위의 체크박스 예로 들어 살펴보겠다.

• useState를 이용하기 위해서는, React에서 import 키워드로 useState 를 불러와야 한다.

  import { useState } from "react";

• 이후 useState를 컴포넌트 안에서 호출해 준다.
  useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다.
  일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

• 문법적으로 보면 아래 예시의 isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수이다.

  function CheckboxExample() {
  
    // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
    const [isChecked, setIsChecked] = useState(false); // 1번
  
    //...
  
    // 1번 코드를 풀어쓰면, 2번 코드와 같습니다.
    const stateHookArray = useState(false); // 2번
    const isChecked = stateHookArray[0];
    const setIsChecked = stateHookArray[1];
  }

• useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초깃값이다.

  // useState 수도 코드
  const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

• 수도 코드를 실제 코드로 작성해 보자.

  // useState 문법 예시
  function CheckboxExample() {
    const [isChecked, setIsChecked] = useState(false);
    // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);

  • isChecked : state를 저장하는 변수
  • setIsChecked : state isChecked를 변경하는 함수
  • useState : state hook
  • false : state 초깃값

• 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다.
  여기서는 isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용했다.

  // JSX에서 삼항연산자 사용 예시
  <span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state 갱신하기

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출한다.
이번 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked가 변경되어야 한다.

브라우저에서 checked로 값이 변경되었다면, React의 isChecked도 변경되어야한다 !

• 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked를 호출하고, 이 함수가 setIsChecked를 호출하게 된다.
  setIsChecked가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 한다.

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  console.log("rerendered?");
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

이벤트 처리

---

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다.
단, 몇 가지 문법 차이가 있다.

• React에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다.

예를 들어 HTML에서 이벤트 처리 방식이 아래와 같다면,

<button onclick="handleEvent()">Event</button>

React의 이벤트 처리하는 기본 방식은 아래와 같다.

<button onClick={handleEvent}>Event</button>

onChange

<input> <textarea> <select>와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다.
React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트한다.

onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다.
컴포넌트 return 문 안의 input 태그에 value와 onChange를 넣어주었다.

onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트이다.

이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 변경한다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>)
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다.

버튼이나 <a> tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라, 앱이 반응해야 할 때 자주 사용하는 이벤트이다.

그럼 위의 onChange 예시에 버튼을 추가하여 버튼 클릭 시,
input tag에 입력한 이름이 alert을 통해 알림 창이 팝업 되도록 코드를 추가해 보겠다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>);
};

위와 같이 onClick 이벤트에 alert(name) 함수를 바로 호출하면,
컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다.

때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 alert이 실행되고
따라서 그 결과인 undefined(함수는 리턴 값이 없을 때 undefined를 반환한다.)가
onClick에 적용되어 클릭했을 때 아무런 결과도 일어나지 않는다.

따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라,
아래와 같이 리턴문 안에서 함수를 정의하거나, 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 한다.

import "./styles.css";
import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    alert(name);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <input type="text" value={name} onChange={handleChange}></input>
			
	  {/* 함수 정의하기 */}
	  <button onClick={handleClick}>Button</button>

	  {/* 함수 자체를 전달하기 */}
      {/* <button onClick={() => alert(name)}>Button</button> */}

      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;

Action item - select

// select tag는 사용자가 drop down 목록을 열어 그중 한 가지 옵션을 선택하면, 선택된 옵션이 state 변수에 변경된다.

import React, { useState } from "react";
import "./styles.css";

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  console.log(choice);
  const handleFruit = (event) => {
    //TODO : select tag 가 정상적으로 작동하도록 코드를 완성하세요.
    setChoice(event.target.value);
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

export default SelectExample;

Action item - Pop up

// Pop up 역시 Pop up의 open과 close를 state를 통해 관리할 수 있다.

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = () => {
		// Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    setShowPopup(!showPopup);
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
			{/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick={togglePopup}>
        Open me
      </button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

💬 Sprint Review

---

React Twittler State & Props 스프린트에서는 지금까지 배운
state, props를 활용하여 유저 parkhacker의 Twittler에서의 트윗 전송 기능을 구현한다.

이번 스프린트의 핵심은 트윗 추가 및 추가된 트윗 조회 기능 구현이다.

이 기능 구현을 위해서 어떤 컴포넌트에 어떤 state가 필요하고, 이 state를 어떻게 변화시킬 것인지 고민해 보자.

🔥 Bare Minimum Requirement

✅ React Router 설치

• React Router를 npm으로 설치해야 합니다.

✅ 상세 컴포넌트 구현하기

• 원하는 레이아웃에 끼워 넣을 수 있게 상세 컴포넌트를 먼저 구현합니다.

✅ Sidebar 컴포넌트 (Sidebar.js)

• Sidebar 컴포넌트는 이미 구현되어 있습니다. Sidebar.js 파일에서 직접 확인하세요.

✅ Footer 컴포넌트 (Footer.js)

• Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 footer가 있어야 합니다.

✅ Tweet 컴포넌트 (Tweet.js)

• 각 트윗에 꼭 필요한 정보를 담고 있어야 합니다. (프로필 사진, 유저 이름, 트윗 생성 일자, 트윗 메시지)
  • 프로필 사진을 넣기 위해 img 엘리먼트를 작성하고, src 속성에 전달받은 props의 사진 정보가 들어가 있는지 확인해 주세요.
  • 유저 이름을 넣기 위해 span 엘리먼트를 작성하고, class 이름을 tweet__username로 지정하세요.
  • 트윗 생성 일자를 넣기 위해 span엘리먼트를 작성하고, class 이름을 tweet__createdAt으로 지정하세요.
    • 날짜 형식은 yyyy. mm. dd. 이어야 하고, parsedDate 변수를 이용하세요.
  • 트윗 메시지를 넣기 위해 div 엘리먼트가 작성되어 있습니다. class 이름을 tweet__message로 지정되어 있는지 확인해 주세요.
    • 트윗 메시지를 div.tweet__message의 textContent로 넣습니다.
• dummyTweets가 아닌 다른 데이터가 props로 전달되어도 트윗 정보를 정확하게 표시해야 합니다.

✅ 페이지 컴포넌트 구현하기

• 페이지를 구성하는 컴포넌트를 작성합니다.
  • 이번 과제의 현재 유저는 parkhacker이기 때문에, Twittler의 MyPage에서 parkhacker의 트윗만 보여야 하는 요구사항을 만족해야 합니다.

✅ About 컴포넌트 (About.js)

• About 컴포넌트의 자식 컴포넌트로 Footer 컴포넌트가 있는지 확인해 주시고, 없다면 연결해 주세요.

✅ MyPage 컴포넌트 (MyPage.js)

• 주어진 트윗 목록(dummyTweets)중 현재 유저인 parkhacker의 트윗만 보여야 합니다.
• const 변수로 선언된 filteredTweets을 활용해 parkhacker의 트윗이 보이도록 구현해 주세요.
• MyPage 컴포넌트의 자식인 Tweet 컴포넌트에 props로 각 트윗의 정보(dummyTweets의 요소)가 전달되어야 합니다.
• MyPage 컴포넌트의 자식 컴포넌트로 Footer 컴포넌트가 있어야 합니다.
  • MyPage는 dummyTweets로 구현된 컴포넌트입니다.
    State&Props로 구성한 컴포넌트와 비교하여 왜 State&Props를 사용해야 하는지 이해해 보세요.

✅ Tweets 컴포넌트 (Tweets.js)

• 하나의 트윗이 아니라, 주어진 트윗(dummyTweets) 개수에 맞게 보여줘야 합니다.
• Tweets 컴포넌트의 자식 컴포넌트로 Footer 컴포넌트가 있어야 합니다.

✅ React Router 적용하기

• 이전 React Twittler SPA 과제에서 배운 내용을 바탕으로 아래 기술 요구사항을 구현합니다.

✅ React Router 컴포넌트 적용

• Route path가 "/"인 Tweets 컴포넌트가 있어야 합니다.
• Route path가 "/about"인 About 컴포넌트가 있어야 합니다.
• Route path가 "/mypage"인 MyPage 컴포넌트가 있어야 합니다.
• React Router의 Link 컴포넌트가 3개 있어야 합니다.
• Tweets 아이콘의 Link 컴포넌트는 "/"로 연결되어야 합니다.
• About 아이콘의 Link 컴포넌트는 "/about"로 연결되어야 합니다.
• MyPage 아이콘의 Link 컴포넌트는 "/mypage"로 연결되어야 합니다.

✅ React Router로 SPA 구현하기

• 처음 접속 시, URL path가 /이어야 합니다.
• About 메뉴를 누르면 URL path가 /about으로 라우트 되어야 합니다.
• Mypage 메뉴를 누르면 URL path가 /mypage로 라우트 되어야 합니다.

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

• 이번 과제의 핵심입니다. Tweets 컴포넌트에서 어떤 데이터가 state가 되어야 하고, 어떤 데이터를 props로 하위 컴포넌트에 전달해야 할지 고민하고 아래 기술 요구사항을 구현합니다. State, Props 레슨과 실습이 도움이 될 겁니다. 😇

✅ Tweets.js 트윗 전송 Form 테스트

• 유저 이름을 작성할 수 있는 input 엘리먼트가 있어야 합니다. (className : "tweetForm__input--username")
• input의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다.
• 트윗을 작성할 수 있는 textarea 엘리먼트가 있어야 합니다. (className : "tweetForm__input--message")
• textarea의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다.
  트윗을 전송할 수 있는 button 엘리먼트가 있어야 합니다. (className : "tweetForm__submitButton")
• button의 값이 변경될 때 onClick 이벤트 핸들러가 불려야 합니다.
• 유저 이름과 트윗을 작성하고, 트윗 버튼을 누르면 새로운 트윗이 추가되어야 합니다.
  • 기존 dummyTweets를 모두 보여줘야 합니다.
  • 새로 추가된 트윗을 포함하여 보여줘야 합니다.
  • 새로 추가된 트윗이 최상단에 위치하여야 합니다.

⚙️ 코드 & 구현 화면

// TODO : useState를 react로 부터 import 합니다.
import React from "react";
import Footer from "../Footer";
import Tweet from "../Components/Tweet";
import "./Tweets.css";
import dummyTweets from "../static/dummyData";
import { useState } from "react";

const Tweets = () => {
// TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
// -> useState를 몇 곳에 어떻게 사용할지 생각한다.
  const [newComment, setNewComment] = useState(dummyTweets);
  const [user, setUser] = useState("parkhacker");
  const [msg, setMsg] = useState("");

  const handleButtonClick = (event) => {
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.
    // -> 버튼을 눌렀을 때, 입력한 data 값이 dummyTweets에 추가되어야 한다.
    // -> tweet들이 모여있는 컴포넌트 안에 내가 입력한 tweet을 컴포넌트화해서 넣어준다.
    // -> useState 사용, spread 문법으로 배열에 추가
    const tweet = {
      ...dummyTweets,
      id: dummyTweets.length,
      username: user,
      content: msg,
      createdAt: new Date().toLocaleDateString("ko-kr"),
      updatedAt: new Date().toLocaleDateString("ko-kr"),
    };
    setNewComment([tweet, ...newComment]);
  };

  const handleChangeUser = (event) => {
    // TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
    setUser(event.target.value);
  };

  const handleChangeMsg = (event) => {
    // TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
    setMsg(event.target.value);
  };

  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">
                {/* -> 폼 엘리먼트에서 변경될 수 있는 입력 값은 onChange 이벤트로 state 관리 & 업데이트 */}
                <input
                  type="text"
                  value={user}
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange={handleChangeUser}
                ></input>
                
                <textarea
                  className="tweetForm__input--message"
                  value={msg}
                  placeholder="your message here.."
                  onChange={handleChangeMsg}
                />
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
				  {/* -> dummyTweets가 아닌 useState가 상태 관리하는 element(배열)가 와야 한다. */}
                  {`Total: ${newComment.length}`}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              {/* -> 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이므로 onClick */}
              <button
                className="tweetForm__submitButton"
                onClick={handleButtonClick}
              >
                submit
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {/* -> `Total: ${newComment.length}`과 마찬가지로 같은 element(배열)를 가져와 map으로 뿌려준다. */}
        {newComment.map((el) => {
          return <Tweet tweet={el} />;
        })}
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;

import React from "react";
import Footer from "../Footer";
import Tweet from "../Components/Tweet";
import "./MyPage.css";
import dummyTweets from "../static/dummyData";

const MyPage = () => {
// TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다.
// -> dummyTweets 배열에서 filter로 parkhacker 값만 추출
  const filteredTweets = dummyTweets.filter((tweet) => {
    return 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">
        <Tweet tweet={filteredTweets[0]} />
        {/* TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다. */}
      </ul>
      <Footer />
    </section>
  );
};

export default MyPage;