[React-twittler] 자식 컴포넌트에서 부모 컴포넌트로 데이터 보내기

오늘 만든 것

오늘은 트위터와 유사한 twittler 만들기를 진행했습니다. react 기초를 배우기 위해 제공되는 과제입니다.

기존 과제는 트윗을 전송 시 전송한 트윗은 메인화면 가장 위에 띄우는 것입니다. 그리고 mypage에 갔을 때는 본인 트윗만 띄우는 게 끝이에요.

그렇게 모든 테스트는 통과했는데 이랬을 때 다른 페이지를 갔다 오면 이전에 전송한 기록들이 싹 없어지고 초기화가 됩니다.

컴포넌트가 언마운트되면서 tweet data가 포함된 state가 소멸되는 것 같아요.. 그리고 다시 마운트 될 때 초기값으로 재설정되면서 기존 dummydata에 있는 것만 보이는 게 아닌가 싶습니다.. 

저도 아직 react 생명주기를 잘 몰라서 그냥 그렇지않을까..라는 생각입니다. 

 

LocalStorage 사용하기보다 이참에 자식 컴포넌트에서 부모 컴포넌트로 데이터 보내는 걸 해보려고 합니다.

구현

음..App.js에 data 관련 state를 만들고 자식 컴포넌트들에게 주면 해결되지 않을까 생각했습니다.

트윗전송해서 바뀐 데이터는 자식 컴포넌트에서 App 컴포넌트로 데이터를 끌어올려주기로 했습니다.

 

App.js

const [data, setData] = useState(dummyTweets);

그래서 app.js에 data를 저장할 state를 만들어줬습니다.

 <Routes>
  <Route
    path="/"
    element={<Tweets setData={setData} memorized={data} />}
  ></Route>
  <Route
    path="/mypage"
    element={<Mypage updatedData={data} />}
  ></Route>
  <Route path="/about" element={<About />}></Route>
</Routes>

그리고 그걸 Tweets 컴포넌트에게 보내줬습니다. Mypage에도요. 

Tweets 컴포넌트에서 트윗전송이 일어나기 때문에 Tweets 컴포넌트에는 갱신된 데이터를 받기 위한 setData 함수도 보내줍니다.

 Tweets

  const handleButtonClick = (event) => {
    if (!inputUser || !content) return;
    const tweet = {
      content: content,
      createdAt: new Date().toISOString(),
      id: data.length + 1,
      picture: "https://randomuser.me/api/portraits/men/98.jpg",
      updatedAt: new Date().toISOString(),
      username: inputUser,
    };
    setTweetsData([tweet, ...data]);
    setContent(null);
    $textarea.current.value = null;
  };

버튼을 클릭했을 때 Tweets에 있는 데이터 관련 state 값을 갱신합니다.

  useEffect(() => {
    props.setData(data);
  }, [data]);

만약에 Tweets data가 갱신되었다? 그러면 부모로부터 받아온 함수를 이용해 부모의 데이터를 갱신시켜줍니다.

 

그럼 이제 자식 컴포넌트들은 갱신된 값을 가지고 마운트됩니다.

새로고침을 하지 않는 이상 페이지를 왔다 갔다 해도 전송한 트윗이 유지되는 모습을 볼 수 있습니다.

---

기억할 것

리액트의 컴포넌트 구조는 상향식이다. 

데이터의 흐름은 하향식이다. 데이터 전달의 주체가 부모 컴포넌트가 된다.

만약 자식 컴포넌트에서 부모에게 데이터를 보내고 싶다면 부모에서 props로 데이터를 받아올 함수를 전달하면 됩니다. 

자식은 부모에게 받은 함수에 전달한 데이터를 저장하면 됩니다.

---

추가하고 싶은 부분

기능보다는 CSS를 고치고 싶긴 하네요...

---

이게 좋은 방법은 아니겠지만 우선 원하는 결과를 얻었습니다. 미래의 내가 알아서 고쳐줘.