React 글쓰기, 글 목록 보기 실습

import React, {useState} from 'react';
import styled from "styled-components";

const StyledItemBoxDiv = styled.div`
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  margin: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
`;

const ListPages = () => {

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

    const [post, setPost] = useState({
        id:no,
        title:'',
        content:''
        });

    const [posts,setPosts] = useState([
        {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"},
    ]);
    const handleWrite =() => {
    	e.preventDefault();
        setPosts([...posts,post]);
        setNo(no+1);
    };
    const handleChangeTitle = (e) => {
      console.log({title : e.target.value});
      setPost({title : e.target.value});
    };
    const handleChangeContent = (e) => {
        console.log({content : e.target.value});
        setPost({content : e.target.value});
    };

    const handleForm = (e) => {



        console.log(e.target.name);
        console.log(e.target.value);

        //변수에 대괄호로 동적 변수 생성
        //computed property names 문법(키값 동적할당)
        setPost({
           ...post, [e.target.name] : e.target.value
        });
    };


    return (
        <div>
            <h1>리스트 페이지</h1>
                <form onSubmit={handleWrite}>
                    <input type="text" placeholder='제목을 입력하세요' value={post.title} onChange={handleForm} name='title'/>
                    <input type="text" placeholder='내용을 입력하세요' value={post.content} onChange={handleForm} name='content'/>

                    <button type='submit'>글쓰기</button>
                </form>
            <hr/>
            {posts.map(
                (post) =>
                    <StyledItemBoxDiv>
                        <div>
                        번호 : {post.id} / 제목 : {post.title} / 내용 : {post.content}
                        </div>
                        <button>삭제</button>
                    </StyledItemBoxDiv>
            )};

        </div>
    );
};

export default ListPages;