React 실습 - Controlled Component

  Controlled Component란? 

리액트가 state를 통제할 수 있는 컴포넌트!

Hook로 controlled component구현이 궁금하다면? React공식문서.ko

편지,트윗을 주고받을때  '보내는사람, 보낼내용'을 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="여기는 텍스트 영역입니다."
        //----------------------------컨트롤 컴포넌트 -----------------------
        onChange={(event) => setMsg(event.target.value)}
        //----------------------------컨트롤 컴포넌트 -----------------------
        className="tweetForm__input--message"
        defaultValue={"hello world"}
        value={msg}
      ></textarea>
    </div>
  );
}
// value랑 defaultvalue랑 어떤 차이인가요??
// setMsg가 변경함수인거는 알겠는데 어떻게 변하게 하는지가 어디에 적혀있는건가요?

React 렌더링 생명주기에서 폼 엘리먼트의 `value`어트리뷰트는 DOM의 value를 대체한다.

비제어 컴포넌트를 사용하면 React초기값을 지정하지만, 그 이후의 업데이트는 제어하지 않는것이 좋다.

이럴 경우엔, `value`어트리뷰트 대신 `defaultValue`를 지정할 수 있다!

컴포넌트가 마운트된 후에 `defaultValue`어트리뷰트를 변경해도 DOM의 값이 업데이트되지 않는다.

<input type="checkbox">와 <input type="radio">는 `defaultChecked`지원

<select>와 <textarea>는 `defaultValue`지원

React공식문서해당내용