import React, { useState } from "react"; import "./styles.css"; const currentUser = "김코딩"; function Twittler() { const [tweets, setTweets] = useState([ { uuid: 1, writer: "김코딩", date: "2020-10-10", content: "안녕 리액트" }, { uuid: 2, writer: "박해커", date: "2020-10-12", content: "좋아 코드스테이츠!" } ]); const addNewTweet = (newTweet) => { setTweets([...tweets, newTweet]); }; // 이 상태 변경 함수가 NewTweetForm에 의해 실행되어야 합니다. return ( <div> <div>작성자: {currentUser}</div> <NewTweetForm onButtonClick={addNewTweet} /> <ul id="tweets"> {tweets.map((t) => ( <SingleTweet key={t.uuid} writer={t.writer} date={t.date}> {t.content} </SingleTweet> ))} </ul> </div> ); } function NewTweetForm({ onButtonClick }) { const [newTweetContent, setNewTweetContent] = useState(""); const onTextChange = (e) => { setNewTweetContent(e.target.value); }; const onClickSubmit = () => { let newTweet = { uuid: Math.floor(Math.random() * 10000), writer: currentUser, date: new Date().toISOString().substring(0, 10), content: newTweetContent }; onButtonClick(newTweet); }; return ( <div id="writing-area"> <textarea id="new-tweet-content" onChange={onTextChange}></textarea> <button id="submit-new-tweet" onClick={onClickSubmit}> 새 글 쓰기 </button> </div> ); } function SingleTweet({ writer, date, children }) { return ( <li className="tweet"> <div className="writer">{writer}</div> <div className="date">{date}</div> <div>{children}</div> </li> ); } export default Twittler;
위 코드에서 벌어진 일은 다음과 같다.
0. 부모 컴포넌트 Tweetler - 자식 컴포넌트 NewTweetForm(새 트윗 작성) / tweets (트윗 목록)
1. tweets 컴포넌트에 전달되는 tweets state를 부모 컴포넌트인 Tweetler로 끌어올림
2. tweet의 상태변화함수 addNewTweet을 NewTweetForm에 onButtonClick이라는 props로 전달
3. NewTweetForm에서 생성된 객체 newTweet이 onButtonClick에 전달인자로 전달됨
4. 결과적으로 newTweet 객체가 tweets state에 추가됨
저번에 작심삼일 하고 거진 1달만에 TIL을 쓰네 진심...? 진심이니? 양심있니?
그래... 그래도 아예 안 쓰는 것보다야 낫겠지...
배운 게 소화가 되어야 블로깅이 가능한데 항상 그날 배운 거 한 번 훑고 다음 날 거 예습하기 급급하니까 자꾸 모래 위에 집을 짓는 꼴이 되는 거 같기도... 그치만 페어 때 민폐를 끼치는 건 역시 무섭다. 이거 해결방법이 있을까?