[SEB_FE_44] React(4) - React 데이터 흐름

오늘 배운 주제

---

• State 끌어올리기 (Lifting State Up)

오늘 배운 내용

---

• State 끌어올리기

State 끌어올리기란, 여러 개의 하위 컴포넌트가 동일한 데이터를 필요로 할 때, 해당 데이터를 부모 컴포넌트에서 관리하도록 하는 것을 의미

하위 컴포넌트들은 데이터를 직접적으로 받지 않고, 부모 컴포넌트에서 전달할 수 있다.

리액트에서 State 끌어올리기를 구현하려면, 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해 Props를 사용합니다. Props를 이용하여 데이터를 전달하고, 하위 컴포넌트에서 해당 데이터를 사용할 수 있다.

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
    };
    // TDOO: 여기서 newTweet이 addNewTweet에 전달되어야 합니다.
    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;

오늘의 과제

---

StatesAirline Client - Part 1

• Main.js

const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

      setCondition({ departure, destination })
    }
  };
return (
  	{...생략}
	<Search onSearch={search}/>
)

• Search.js

function Search({ onSearch }) {
  const handleSearchClick = () => {
    console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');
    onSearch({departure : "ICN", destination : textDestination})
  };
}