State

 

📂 리액트에서 데이터의 흐름

---

리액트는 각자 다른 역할을 하는 다양한 컴포넌트들의 집합이다.

리액트의 컴포넌트는 단일책임 원칙을 기본으로, 한 컴포넌트는 한 가지 역할만 한다.

한 컴포넌트에 다른 컴포넌트가 부모 자식 관계처럼 들어올 수 있다.

이렇게 역할과 위치를 기준으로 컴포넌트들을 배치하다보면 컴포넌트는 '트리구조'가 된다.

결국 하나의 컴포넌트 안에 모든 컴포넌트들이 위치하게 되는 것이다.

 

리액트 안의 데이터는 이러한 트리구조에 따라 위에서 아래로 흐른다.

한 부모 안에 위치한 자식 컴포넌트는 부모가 가지고 있는 데이터를 넘겨 받아 쓸 수 있다.

데이터가 부 -> 자 이렇게 아래로 흐르니까. 

단방향 데이터 흐름은 리액트의 중요한 키워드이다.

컴포넌트는 바깥에서 props를 이용해서 속성을 전달 받아 사용하는 것 역시 하향식 데이터 흐름의 한 예이다.

 

 

 

📂 state

---

📎 변하는 값을 state로 관리한다

📎 아래 세가지 조건을 기준으로 state 여부를 판단할 수 있다

• 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
• 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

📎 state의 위치

state가 필요한, 사용되는 컴포넌트에 위치시킨다.

다수의 컴포넌트에서 한 state의 영향을 받는다면 컴포넌트들의 공통 소유 컴포넌트에 위치시킨다

공통 부모 컴포넌트에 두는 것이다.

 

 

 

 

 

 

📂 state 끌어올리기

---

📎 state가 끌어올려지는 경우

상위 컴포넌트가 하위 컴포넌트에 의해 변경되는 경우가 있다.

예를 들어, 트윗을 작성하는 폼이 있는 컴포넌트는 전체 트윗 컴포넌트 안에 있다. 폼에서 작성한 새로운 트윗 내용을 전체 트윗에 추가시키는 작업은 자식 컴포넌트에서 만들어진 데이터를 부모 컴포넌트에서 사용하는 것이라 할 수 있다.

리액트는 단방향 흐름을 지향한다고 했다. 이런 경우를 역방향 혹은 양방향이라고 생각할 수 있지만 아니다.

단방향의 원칙은 여전히 지켜야 하는 것이다.

이런 경우에서 사용하는 것이 state 끌어올리기 이다.

 

state가 끌어올려지는 방법과 사용에 대해 아주 간단하게 이야기 하자면,

부모 컴포넌트에 있는 함수를 props로 자식 컴포넌트에 전달한다.

그럼 자식 컴포넌트에서 이 함수를 사용할 수 있다.

함수를 호출하며 인자로 자식 컴포넌트의 값을 사용하면 자식 컴포넌트에서 만들어진 값을 부모 컴포넌트로 전달할 수 있는 것이다!

📎 부모에 있는 함수를 사용해서 자기가 갖고 있는 값, 혹은 어떤 행위를 '함수와 묻혀서 돌려 보내는', 그런 느낌이다. 하하.

 

 

 

 

 

 

 

 

📂 state 사용 방법

---

📎  useState를 임포트 해야한다.

📎  상위 컴포넌트에 있는 함수를 상위 컴포넌트에 임포트 된 하위 컴포넌트에 속성으로 전달한다.

📎  하위 컴포넌트에서 함수를 사용한다.

📎  그냥 호출해도 되고, 인수로 넣어서 보내도 된다.

 

 

📃 예시

NewTweet 컴포넌트의 객체(데이터)를 Twittler 컴포넌트로 보냄

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}/> //onButtonClick으로 속성 전달
      <ul id="tweets">
        {tweets.map((t) => (
          <SingleTweet key={t.uuid} writer={t.writer} date={t.date}>
            {t.content}
          </SingleTweet>
        ))}
      </ul>
    </div>
  );
}

function NewTweetForm({ onButtonClick }) { // 하위 컴포넌트에 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); // onButtonClick(=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;

 

 

 

 

📂 reference

코드스테이츠