controlled Component

리액트가 state를 통제할수있는 컴포넌트를 controlled Component라고한다.

 

트윗은 받는 사람 정해져있다
보내는 사람은 변경될수있다
내용도 변경될수있는 값 상태가 된다.

 

react가 state를 통제하는방법 => input에 값입력시, state도 그때그때 바뀌면(onchange)된다.
그리고 이 변경된 state와 input의 value 또한 같게 작성해야한다.

 

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

export default function App() {
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>

      <div>{msg}</div>
      {/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 
      아래 textarea를 변경하세요. */}
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={(event) => {setMsg(event.target.value)}}
        value={msg}
      ></textarea>
    </div>
  );
}