input

import React, { useState } from 'react';

import styled from 'styled-components';

const StyledItemBoxDiv = styled.div`

  display: flex;

  justify-content: space-between;

  border: 1px solid black;

  padding: 10px;

  height: 100px;

  margin: 20px;

  align-items: center;

`;

const ListPage = () => {

  const [no,setNo] = useState(6);

  const [post,setPost] = useState({

    id:no,

    title : "",

    content : ""

  });

  const handleWrite=()=>{

    // ListPage의 setPost에 무엇을 담아야 함?

    setPosts([...posts,post]);

    setNo(no + 1);

  }

  // const handleChangeTitle =(e)=>{

  //   setPost({title: e.target.value});

  // }

  // const handleChangeContent =(e) =>{

  //   setPost({content: e.target.value});

  // }  

  // input 한개당 함수가 1개씩이라 불편함. 그래서 handleForm 메서드를 사용(computed property names 문법 사용)

  const handleForm = (e) => {

    // computed property names 문법(키값 동적할당)

    setPost({...post,[e.target.name] : e.target.value});

  }

  const [posts, setPosts] = useState([ // DB 연결을 안 했기 때문에 임시로 쓸 데이터

    {id:1, title:"제목1", content:"내용1"},

    {id:2, title:"제목2", content:"내용2"},

    {id:3, title:"제목3", content:"내용3"},

    {id:4, title:"제목4", content:"내용4"},

    {id:5, title:"제목5", content:"내용5"},

  ]);

  return (

    <div>

      <h1>리스트 페이지</h1>

      <form>

        <input type="text" placeholder='제목을 입력하세요' value={post.title} onChange={handleForm} name="title"/>

        {/* onChange={} 없으면 상태값이 변하지 않아서 값이 입력되지 않음. 따라서 함수로 상태값을 변경해주어야함.   */}

        <input type="text" placeholder='내용을 입력하세요' value={post.content} onChange={handleForm} name="content" />

        <button type="button" onClick={handleWrite}>글쓰기</button>

      </form>

      <hr/>

      {posts.map((post)=>

        <StyledItemBoxDiv>

          <div>

           번호 : {post.id} 제목 : {post.title} 내용 : {post.content}

          </div>

          <button>삭제</button>

        </StyledItemBoxDiv>

      )}

     

    </div>

  );

};

export default ListPage;