[실습] React State & Props

/* App.js */
const App = (props) => {
  return (
    <BrowserRouter>
      <div className="App">
        <main>
          <Sidebar />
          <section className="features">
            <Routes>
              <Route path="/" element={<Tweets />}></Route>
              <Route path="/mypage" element={<MyPage />}></Route>
              <Route path="/about" element={<About />}></Route>             
            </Routes>
          </section>
        </main>
      </div>
    </BrowserRouter>
  );
};

➡️ 'Route' 컴포넌트를 이용해서 경로를 의미하는 path와 그 경로에서 보여줄 element 컴포넌트를 설정해주었다.

/* Tweets.js */
const Tweet = ({ tweet }) => {
  const userName = tweet.username;
  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');
  const tweetMsg = tweet.content;

  return (
    <li className="tweet" key={tweet.id}>
      <div className="tweet__profile">
        <img src={tweet.picture} />
      </div>
      <div className="tweet__content">
        <div className="tweet__userInfo">
          <div className="tweet__userInfo--wrapper">
            <span className='tweet__username'>{userName}</span>
            <span className='tweet__createdAt'>{parsedDate}</span>
          </div>
        </div>
        <div className="tweet__message">
          {tweetMsg}
        </div>
      </div>
    </li>
  );
};

➡️ 같은 형식의 반복되는 < li > 를 'Tweet' 컴포넌트로 설정하였다. 'tweet' 데이터 객체에서 username과 createAt, content를 prop으로 받아 각각의 위치에 {}로 묶어 넣어주었다.

const Tweets = () => {
  const [posts, setDummyTweets] = useState(dummyTweets)
  const [username, setUseName] = useState("")
  const [tweetMsg, setTweetMsg] = useState("")
  
/* 생략 */

➡️ 각각의 컴포넌트의 상태를 제어하기 위해 useState()를 설정해주었다.

const handleButtonClick = (event) => {
  // posts에 없는 숫자를 id로 부여하기 위해 전체 배열의 길이에 +1 해준 숫자를 만들어주었다.
    const newId = posts.length + 1;
  
    const newTweet = {
      id: newId,
      username: username,
      picture: `https://randomuser.me/api/portraits/men/98.jpg`,
      content: tweetMsg,
      createdAt: new Date(),
      updatedAt: new Date()
    }
    setDummyTweets([newTweet, ...posts])
    setUseName("")
    setTweetMsg("")
  };

➡️ dummyData에 있는 다른 데이터들과 같은 형식을 가진 newTweet 객체를 만들어주었다. 각각 useState에 있는 state를 넣어주고, setState 함수를 초기화시킨다.

const handleChangeUser = (event) => {
    setUseName(event.target.value);
  };

  const handleChangeMsg = (event) => {
    setTweetMsg(event.target.value);
  };

➡️ event.target.value를 이용해 event가 발생한 element의 value로 업데이트해준다.

	<textarea 
       placeholder='your tweet here..'
       className='tweetForm__input--message'
       value={tweetMsg}
       onChange={handleChangeMsg}
	></textarea>

➡️ value로 tweetMsg를 설정하고, 값이 변할 때마다 실시간으로 handelChangeMsg 함수를 호출해서 값을 넘겨준다.

	<button 
       className='tweetForm__submitButton'
       onClick={handleButtonClick}
    >Tweet</button>

➡️ 버튼이 눌렸을 때 handleButtonClick 함수를 호출해준다.

	<ul className="tweets">
       {posts.map((tweet) => {
          return( <Tweet tweet={tweet}/>)
       })}
    </ul>

➡️ < ul > 컴포넌트 안에 따로 정의한 Tweet 컴포넌트를 map을 이용해 렌더링한다.

/* MyPage.js */
const filteredTweets = dummyTweets.filter(
    (tweet) => tweet.username === 'parkhacker'
  );

/* 생략 */

	<ul className="tweets__mypage">
       {filteredTweets.map((tweet) => {
          return <Tweet key={tweet.id} tweet={tweet} />;
       })}
    </ul>

➡️ filter를 이용해 username이 'parkhacker'인 객체만 필터링한 배열 filteredTweets 를 만들어준다. filteredTweets 를 이용해서 map 함수를 실행하고, 각각의 요소를 'Tweet' 컴포넌트에 props로 전달한다.