React-Twittler-State-Props

  const [userArea, setUserArea] = useState("");
  const [textArea, setTextArea] = useState("");
  const [tweets, setTweets] = useState(dummyTweets);

 

구조 분해 할당 (Destructuring assignment)을 통해 변수와 함수를 할당하여 사용

 

 

 const handleButtonClick = event => {
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.
    const tweet = {
      id: tweets.length + 1,
      username: userArea,
      picture: "https://randomuser.me/api/portraits/men/98.jpg",
      content: textArea,
      createdAt: new Date().toLocaleDateString("ko-kr"),
      updatedAt: new Date().toLocaleDateString("ko-kr"),
    };
    setTweets([tweet, ...tweets]);
    setTextArea("");
  };

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

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

 

handleChangeUser 함수가 호출 됐을 때,  userArea를 setUserArea 함수를 통해 event.target.value로 변경.

handleChangeMsg 함수가 호출 됐을때,  textArea를 setTextArea 함수를 통해 event.target.value로 변경.

 

 {tweets.map(tweet => {
          return <Tweet key={tweet.id} tweet={tweet} />;
        })}

 

Tweets을 map메서드를 통해 배열의 각 요소를 Tweet 컴포넌트로 변환. 각 요소에 key 속성으로 고유한 id 값을 지정, tweet 속성으로 해당 요소가 Tweet 컴포넌트에 전달.