상태끌어올리기 : 함수를 내려주셈

 

하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것 

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

 

내려줄때 변경하는 함수!!!를 내려주는것에 주목하자

 

코드를 분석하며 공부해보자!

---

Action Item:  예제 분석하기

https://codesandbox.io/s/simple-lifting-state-up-hooks-ljrdy?from-embed 

simple-lifting-state-up-hooks - CodeSandbox

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

  return <button onClick={handleClick}>값 변경</button>;
}

 

천천히 살펴보자.

 

1. 자식 컴포넌트인 ChildComponet에서 handleClick을 눌렀을때 부모의 상태가 변하는것이다.

=> 부모에서 props로 뭔가를 내려줘야한다. 무엇을 내려줄것인가?

   =>위에서 봣듯이 상태를 변경하는 함수 그자체를 내려주라고 했다.

     => setValue를 내려줘야겠다. setValue를 봐보니. handlechangeValue()에서 사용중이다. 그렇다면 handlechangeValue를 내려줘야한다. 

         => 원하는 이름에 담아서 내려줘보자

 

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent 내려주고싶은이름={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({내려주고싶은이름}) {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    내려주고싶은이름()
  };

  return <button onClick={handleClick}>값 변경</button>;
}

handlechangevalue를 내려준것이며 그 이후에 사용은 모두 변수이름으로 사용해줬다. 내려줄때도 변수이름으로.

 

내려주고싶은이름()이 실행이되어야 handlechangevalue가 움직인다.

요 프로세스를 잘 외워두자.

 

Action Item: Twittler 예제 분석하기

 

https://codesandbox.io/s/twittler-react-lifting-state-up-hooks-ig6n4?from-embed 

Twittler React - Lifting State Up Hooks - CodeSandbox

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 />
      <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에 전달되어야 합니다.
  };

  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에서 이미 {onButtonClick}으로 받아왔기에 이것은 조금 다르게 이름을 픽스해줘야한다.

밑에서는 받고있는데 <NewTweetForm />을 보면 Props로 받아온게없다. 아 여기를 채워야하는구나!!

 

내려줄게뭣인가?

 => addNewTweet이옵니다.

 => onButtonClick = {addNewTweet}으로 내려주자

 

Step 2

 

 

NewTweetForm 분석하기

 => 새글쓰기가 있는 버튼을 눌렀을때 실행이되서 부모 컴퍼넌트에 영향을 준다. 

  =>onClick버튼을 찾아보자 

    => onClick을 하면 onClicksubmit 이 실행 !

      => 여기에 addNewTweet이 실행되게끔해야겠구나.

         =>  근데 그냥 실행할순없다. 인자를 넣어줘야지! 그렇게 하여 완성된 결과물

 

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;