react 새로운 tweet 추가 방법 공부

 

문제  

---

react를 이용해서 새로운 tweet {} 객체가 추가 되었을 때  usestate를 이용하여 기존 배열에 넣는 방법

 

 

 

 

 

 

---

 

 

 

기존코드

---

  const [userName,setUserName]=useState('')

  const [message, setMessage]=useState('')

  

  



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


  };


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

  };


let nextId=useRef(6)


const handleButtonClick = (event) => {
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    
    let newtweet={
      id: nextId.current,
      username: userName,
      picture: `https://randomuser.me/api/portraits/men/98.jpg`,
      content: message,
      createdAt: new Date().toLocaleDateString('ko-KR'),
      updatedAt: new Date().toLocaleDateString('ko-KR'),
    }
    nextId +=1

    setMessage('')
    setUserName('')
    
    dummyTweets.unshift(newtweet)

    return dummyTweets
    
  };

수정 코드

---

 


  
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  
  
  const [userName,setUserName]=useState('Parkhacker')

  const [message, setMessage]=useState('')

  const [tweets, setTweets]=useState(dummyTweets)

  



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


  };


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

  };



    const tweet={
      id: 0,
      username: userName,
      picture: `https://randomuser.me/api/portraits/men/98.jpg`,
      content: message,
      createdAt: new Date().toLocaleDateString('ko-KR'),
      updatedAt: new Date().toLocaleDateString('ko-KR'),
    }

    const newTweets= [tweet, ...tweets]

    setTweets(newTweets)
    setMessage('')
    setUserName('')

    console.log("tweet버튼이 잘 작동합니다")
    
   
    
  };

{/*새로운 객체가 추가 될 때마다 기존에 배열이 계속 바뀐다(state 상황?!) 
  state를 정의 후 새로운 객체가 추가 될 때마다 배열을 수정하는 함수를 정의 하면 끝	

*/}
  
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
          {tweets.map(tweet=>{
            return <Tweet tweet={tweet}/>
          })}
           
      </ul>

{/*map의 장점은 기존의 배열의 요소들을 이용하여 다른 형태로 바꿀 수 있다. JSX문법에 따라 기존에 만들어진 <Tweet/> 컴퍼넌트를 재사용할 수 있는 것을 떠올르고
거기에 새로운 변수의 데이터를 넣어주면 굳이 다시 html를 만들 필요가 없다.*/}

export default Tweets;

 

 

깨달은 점

 

---

1. 기존 배열을 바꿀 때는 unshift, push 와 같은 배열의 기존 함수들을 사용할 수 있다. 하지만 react 문법을 생각해볼 때 배열이 자주 변한다는 것은 데이터가 변한다는 의미이고 이는 데이터를 useState() 로 정의할 때 더 쉽게 바꿀 있다.  이벤트가 발생하고 함수가 실행이 되면 set함수가 새로운 인자를 받고 이를 자동으로 기존 데이터로 바꿔준다. 이렇게하면 기존 dummy 데이터는 변하지 않고 사용할 수 있다.