TIL 33일차

안광의·2021년 8월 2일

Today I Learned

목록 보기

33/64

시작하며

오늘 React의 States 끌어올리기와 Effect Hook을 학습했는데, Section 1의 마지막 부분에 jsx의 기본 문법과 React의 States와 Prop에 대해 배운 것이 React와 관해 학습한 전부이기 때문에 챕터에 들어가기 전에 복습을 진행하였다.

React

States 끌어올리기

React는 단방향 데이터 흐름에 따라 하향식으로 데이터가 전달되는데, 하위 컴포넌트에서, 부모의 상태를 바꾸어야만 하는 상황이 왔을때는 이를 가능하게 해주는 것이 State 끌어올리기(Lifting state up)이다.

자식 컴포넌트내의 버튼을 클릭했을때 부모 컴포넌트에서 생성된 State를 변경하기 위해서는 상태를 변경시키는 함수를 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에서 addNewTweet이 실행되면서 ...tweets(기존에 있던 트윗)이랑 newTweet이랑 병합

  return (
    <div>
      <div>작성자: {currentUser}</div>
      <NewTweetForm onButtonClick={addNewTweet} /> //여기서 addNewTweet를 prop으로 전달
      <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)// prop으로 전달받은 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;

NewTweetForm에 tweets를 변경할 수 있는 addNewTweet을 props로 전달해준뒤 버튼이 클릭될 때마다 실행되도록 하였다. States 끌어올리기를 학습하기 전에도 사용했던 방법인데 이전에 사용할때는 자식 컴포넌트에서 부모 컴포넌트로 끌어올려준다는 인식없이 사용을 했었다.