20221011 TIL

오늘 공부한 것

• State 끌어올리기 (Lifting State Up)
• Side effect, Effect Hook

간단 정리

state 끌어올리기

• 리액트의 특징은 단방향 데이터 흐름, Top-down이라는 것
• 하지만 만약 a 자식 컴포넌트에서 발생한 이벤트가 동일 계층의 b 자식 컴포넌트 / 혹은 부모 컴포넌트에 영향을 끼친다면 어떻게 처리해야 할까?
  • ex) NewTweetForm에서 새로운 트윗을 작성하고 트윗 작성 버튼을 눌러 click 이벤트를 발생시킴 → Tweets(전체 트윗 목록)에 새로운 트윗이 추가됨
• 이때 필요한 것이 바로 state 끌어올리기이다.
  • 우선 state를 부모 컴포넌트로 끌어올린다. 그 후 (동일 혹은) 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

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을 쓰네 진심...? 진심이니? 양심있니?

• 그래... 그래도 아예 안 쓰는 것보다야 낫겠지...

• 배운 게 소화가 되어야 블로깅이 가능한데 항상 그날 배운 거 한 번 훑고 다음 날 거 예습하기 급급하니까 자꾸 모래 위에 집을 짓는 꼴이 되는 거 같기도... 그치만 페어 때 민폐를 끼치는 건 역시 무섭다. 이거 해결방법이 있을까?