코드스테이츠 5주차 / React Twittler State & Props

앞에서 배웠던 것들을 종합해서 완성하는 과제였다

다른것들은 이전의 과제에서 해결했던 부분이므로
State, Props를 활용해서
새로운 트윗을 썼을때 트윗의 내용이 전송되는 Form을 복습해보자

tweets.js파일을 수정하면 되는데
이때 tweet tweets 파일이 두개 있으므로 잘 찾아가자

Tweets 컴포넌트에서 어떤 데이터가 state가 되어야 하고,
어떤 데이터를 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 입력

먼저 이름과 텍스트 형식에 글을 적었을때 작동하는 함수를 구현해보자
input 의 onChange 이벤트를 사용하면 된다

이벤트 객체 event 를 파라미터로 받아와서 사용 할 수 있고
이 객체의 event.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게 된다
DOM 의 value 값, e.target.value 를 사용하면 현재 input 에 입력한 값을 넣어줄 수 있다
이 값을 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>

새로운 트윗 추가

기존 트윗 데이터들이 포함된 상태에서 트윗 버튼을 누르면 새로운 트윗이 추가되어야 했다
추가해줄 데이터를 만들기 위해서 기존데이터를 복사해서 추가될 데이터를 합쳐줬다
이때 그냥 const 새로운데이터 = [tweet, 데이터] 이렇게 합쳐주게 된다면
데이터 복사가 아니라 값이 공유되기 때문에 Spread 문법을 사용해서 깊은 복사를 해줘야 한다
클릭했을때 실행할 수 있도록 버튼의 onClick 이벤트에 함수를 넣어줬다

마지막으로 중요한건 기존데이터를 포함해 새로운 트윗이 나와야 했는데
이때는 복사해줘서 만들어줬던 데이터에다 map을 돌려서 출력해주면
버튼이 눌렸을때 새로운 데이터 목록으로 추가 되어 해결이 된다

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}/> )}

참고자료
input 상태관리하기
추천하는 리액트 강의
코딩애플 - 유튜브
코딩애플 - 웹사이트