개요

단방향으로 흐르는 React 데이터 흐름에 대해 학습합니다.

---

학습 목표

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
• 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
• state 끌어올리기의 개념을 이해할 수 있다.
  • 상태 변경 함수가 정의된 컴포넌트와 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

---

React 데이터 흐름

개요

• 단방향 데이터 흐름을 가진 React 의 데이트 흐름을 학습합니다.

컴포넌트로 생각하기 (컴포넌트 설계)

• React 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작하는다는 점 입니다. (페이지 단위 X)

• 프로토타입에서 컴포넌트를 찾아 컴포넌트를 만들고 페이지를 조립합니다.
  • 컴포넌트 계층 구조로 나누는 것이 개발자가 가장 먼저 할 일 입니다.
    • 단일 책임 원칙의 기준에서 컴포넌트를 나눕니다.
  • 상향식(bottom-up)으로 앱을 만듭니다.
    • 테스트가 쉽고 확장성이 좋습니다.

데이터는 위에서 아래로 흐릅니다 (데이터흐름 설계)

• 단방향 데이터 흐름 : React 를 대표하는 키워드 중 하나입니다.
• 컴포넌트는 컴포넌트 바깥에서 props 를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있습니다.
• 데이터를 전달하는 주체는 컴포넌트가 됩니다.
  • 데이터 흐름이 하향식(top-down)임을 의미합니다.

데이터 정의

• Twitter 애플리케이션이 갖고 있는 상태
  • 전체 트윗 목록
  • 유저가 작성 중인 새로운 트윗 내용
• 상태는 최소화 하는 것이 좋습니다.
  • state, props 를 분별하는 판단 기준
    1. props 로 부모에게서 전달 됩니까? state ❌
    2. 시간이 지나도 변하지 않습니가? state ❌
    3. 컴포넌트 내 다른 state, props 로 계산이 됩니까? state ❌

상태 위치 정하기

• 공통 소유 컴포넌트
  • 하나의 상태로 두 컴포넌트가 영향을 받는다면 두 컴포넌트의 공통 부모인 컴포넌트입니다.

역방향 데이터 흐름 추가

• 상태 위치를 정한 후, 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 것을 발견할 수 있습니다.
  • 대표 예시, 새로운 트윗 추가

• 상태 끌어올리기 : 하위 컴포넌트가 부모의 상태를 바꿔어야하는 상황의 해결법입니다.
  • 콜백 함수를 사용하는 방법과 비슷합니다

---

상태 끌어올리기 (Lifting State Up)

• 상위 컴포넌트의 상태를 변경하는 함수 를 하위 컴포넌트로 전달하고 하위 컴포넌트가 해당 함수를 실행 한다.
• 예시 코드

import React, { useState } from "react";
...(생략)

function Twittler() {
  ...(생략)

  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);
    setNewTweetContent("");
  };

  return (
    <div id="writing-area">
      <textarea
        id="new-tweet-content"
        value={newTweetContent}
        onChange={onTextChange}
      ></textarea>
      <button id="submit-new-tweet" onClick={onClickSubmit}>
        ...(생략)

---

마치며

• 첫번째로 상태관리 라이브러리를 쓰더라도 React 의 데이터 흐름과 데이터 끌어올리기의 기본 개념은 유효한 상태로 쓰인다고 생각이 들었습니다.
  • 그래서 라이브러리를 안 쓰고 React 만을 사용해서도 앱 개발 할줄 아는 사람이 되어야겠다 생각했습니다.

---

참조

코드스테이츠 프론트엔드 부트캠프
리액트 공식문서