React Props와State

Props와State는 데이터를 다룰때 사용한다

Props

컴포넌트의 속성(property)을 의미하며 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값을 전달해 주는 것을 의미한다

props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다

function Parent() {
  return (
    <div className="parent">
      <h1>안녕 나는 부모야</h1>
      <Child text={"자식에게 글자를 전달해 줘"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달하기 */}
      <Child />
    </div>
  );
}

function Child(props) {

  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

props.children 사용

import "./styles.css";

const App = () => {
  const itemOne = "React를 배우고 있습니다.";
  const itemTwo = "props.children 사용했습니다";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
    <Learn>{`${itemOne} ${itemTwo}`}</Learn >
    </div>
  );
};

const Learn = (props) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return <div className="Learn">
    <h1>{props.children}</h1>
  </div>;
};

export default App;

State

State는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체이며 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리되며 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 

State라는 저장공간에 담아 사용한다

useState를 이용한 state 변경

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

State 끌어올리기

React에서는 기본적으로 하향식 데이터 흐름이지만  상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여러 컴포넌트에서 사용하고, 변경됐을 때 바로 반영되어야 한다면 공통된 상위 컴포넌트에서 state를 처리하고, 하위 컴포넌트에서는 상위로 전달하는 방법을 사용해야 한다. React에서는 이 방법을 state 끌어올리기라고 한다.

 

 

=>부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것을 발견할 수 있다. 바로 새로운 트윗 추가가 대표적인 예 이다. 위의 그림은 버튼을 통한 이 액션은, 부모의 상태를 변화시켜야 한다

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: "코딩노예"
    },
    {
      uuid: 2,
      writer: "박해커",
      date: "2020-10-12",
      content: "좋아 취업해보자!"
    }
  ]);

  const addNewTweet = (newTweet) => {
    setTweets([...tweets, newTweet]);
  }; // 이 상태 변경 함수가 NewTweetForm에 의해 실행된다

//2. onButtonClick props를 통해 상태변경함수 addNewTweet 내려준다
  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>
  );
}
//1.여기서 props를 onButtonClick이라는 이름으로 내려보내고 있다
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
    };
    return 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;