5週目/Twitter State&Propsへの返信

これは前に学んだことを総合して完成させる課題です.

その他は,以前の課題で既に解決した部分である.
StateとPropsの利用
新しいツイッターを書いたとき、ツイッターの内容が転送されるフォーラムを復習しましょう.
tweets.jsファイルを変更すればいいです.
tweet tweetファイルが2つありますので、よく探してください
Tweetsコンポーネントでは、一部のデータがステータスである必要があります.
どのデータをpropsとしてサブコンポーネントに渡すかを考慮できます.

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  const handleButtonClick = (event) => {
    const tweet =   {
    }
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.
  };

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

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

データ型

const dummyTweets = [
  {
    id: 1,
    username: 'kimcoding',
    picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
      1,
      98
    )}.jpg`,
    content:
      '모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 모든 국민은 종교의 자유를 가진다. 국가는 농·어민과 중소기업의 자조조직을 육성하여야 하며, 그 자율적 활동과 발전을 보장한다. 모든 국민은 양심의 자유를 가진다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다.',
    createdAt: '2019-02-24T16:17:47.000Z',
    updatedAt: '2019-02-24T16:17:47.000Z',
  },
  ...
 ]

入力

まず、名前とテキストフォーマットで文章を書くときに役立つ関数を実現しましょう.
InputのonChangeイベントを使用すればよい
イベントオブジェクトイベントはパラメータとして受信され、使用できます.
このオブジェクトのイベント.targetは、イベントが発生したDOM input DOMを指します.
DOMの値、e.target.valueを使用して現在の入力に値を入力します.
この値をuseStateで管理すればいい!

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  let [이름작성, 이름작성함수] = useState("");
  let [텍스트작성, 텍스트작성함수] = useState(""); 

// state를 변경할때는 state함수를 사용해야한다
// 이름작성함수 안에 현재 input에 입력한 값인
// event.target.value를 넣어주고 밑의 input태그 안에
// onChange 이벤트 안에 함수를 넣어서 실행시키게 해주면 완성된다 
  const handleChangeUser = (event) => {
    // TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수
    이름작성함수(event.target.value)
  };

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

<input
  type="text"
  onChange = {handleChangeUser}
></input>

<textarea
  onChange = {handleChangeMsg}
></textarea>

新しいtweetを追加

既存のツイッターデータが含まれている場合は、ツイッターボタンを押すと新しいツイッターを追加する必要があります.
追加するデータを作成するには、既存のデータをコピーし、追加するデータを統合します.const 새로운데이터 = [tweet, 데이터]を合わせると.
データ・レプリケーションではなく値が共有されるため、Spread構文を使用して深度レプリケーションを行う必要があります.
ボタンのonClickイベントに関数を追加し、クリックしたときに実行できるようにします.
最後に重要なのは、既存のデータを含む新しいツイッターが現れるべきだということです.
地図を回して印刷したら.
ボタンを押すと、新しいデータリストに追加されて解決されます

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  let [이름작성, 이름작성함수] = useState("");
  let [텍스트작성, 텍스트작성함수] = useState(""); 
  let [데이터, 데이터함수] = useState(dummyTweets);

  const handleButtonClick = (event) => {
    const tweet =   {
      id: 데이터.length+1,
      username: 이름작성,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: 텍스트작성,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    const 새로운데이터 = [tweet, ...데이터]
    데이터함수(새로운데이터);
  };

<button onClick = {handleButtonClick}>Tweet</button>

{데이터.map((tweet) => <Tweet tweet={tweet}/> )}

参考資料
入力ステータスの管理
推奨される反応講義
エンコードアップル-YouTube
コードアップル-Webサイト