React에서 input창

import styles from "./ListContainer.module.css";
import { useState, useEffect } from "react";

export default function ListContainer() {
  const [inputValue, setInputValue] = useState("is:pr is: open");

	// useEffect(() => {
  //   console.log({ inputValue });
  // }, [inputValue]);

  return (
    <div className={styles.listContainer}>
        <input
          className={styles.input}
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
        />
    </div>
  );
}

1. input의 값을 state에 저장한다. → useState 사용

   const [inputValue, setInputValue] = useState("is:pr is: open");

2. input의 값을 props로 넘기기

   value={inputValue}

3. input의 값이 바뀌는 이벤트 onChange를 사용한다

   onChange={e => setInputValue(e.target.value)}

4. 값이 잘 바뀌는 것이 적용되는지 확인 → useEffect 사용