React (5) - 게시판 구현

App.js

import './App.css'
import { useState } from 'react';
import MovieInput from './MovieInput'
import MovieSearch from './MovieSearch'
import MovieList from './MovieList';

function App() {
  const today = new Date().toISOString().substring(0,10);
  const [movieList, setMovieList] = useState([
    {no: 1, movieTitle: "록키", openDate:"1982-01-15", rating: 5}, 
    {no: 2, movieTitle: "터미네이터", openDate:"1984-01-15", rating: 4},
    {no: 3, movieTitle: "그랑블루", openDate:"1988-01-15", rating: 5}
  ]);

  const [searchList, setSearchList] = useState(movieList);

  function saveMovieFn(movieTitle, openDate){
    let newData = {no: 3, movieTitle: movieTitle, openDate: openDate, rating: 5};
    let newList = [...movieList, newData];
    setMovieList(newList);
    setSearchList(newList);
  }

  function searchMovie(keyword){
    let newList = movieList.filter(function(movie){
      return movie.movieTitle.indexOf(keyword) != -1;
    });

    if(newList){
      setSearchList(newList);
    }
  }

  return (<>
    <div>
      <h1>영화 평점 정보 관리</h1>
      <h3>오늘 날짜: {today}</h3>
    </div>
    <MovieInput onSaveMovie={saveMovieFn} />
    <MovieSearch onSearchMovie={searchMovie} />
    <MovieList movieList={searchList} />
  </>);
}

export default App;

 

MovieInput.js

import { useState } from 'react';

function MovieInput({onSaveMovie}){
    const today = new Date().toISOString().substring(0,10);
    const [movieTitle, setMovieTitle] = useState("영화제목");
    const [openDate, setOpenDate] = useState(today);

    function saveData(event){
        onSaveMovie(movieTitle, openDate);
    }

    return (<>
        <div>
        <fieldset sytle>
            <legend>영화 정보 입력</legend>
            <label>영화 제목</label>
            <input type="text" value={movieTitle} onChange={(e)=>{
                setMovieTitle(e.currentTarget.value);
            }}/> <br />

            <label>개봉 날짜</label>
            <input type="date" value={openDate} onChange={(e)=>{
                setOpenDate(e.currentTarget.value);
            }}/> <button onClick={saveData}>저장</button>
        </fieldset>
        </div>
    </>);
}

export default MovieInput

 

MovieSearch.js

import { useState } from 'react';

function MovieSearch({onSearchMovie}) {
  const [movieSearch, setMovieSearch] = useState()
  return (
    <div>
      <fieldset>
        <legend>영화 정보 검색</legend>
        <label>영화검색</label>
        <input
          type="text"
          value={movieSearch||''}
          onChange={(e) => {
            setMovieSearch(e.currentTarget.value);
          }}
          onKeyUp={(e)=>{
            onSearchMovie(e.currentTarget.value);
          }}
        />{" "}
      </fieldset>
    </div>
  );
}

export default MovieSearch;

 

MovieList.js

function MovieList({movieList}){
    return (<>
        <div>
        <fieldset>
            <legend>영화 정보 목록</legend>
            <table className='table'>
            <thead>
                <tr>
                <th>순서</th>
                <th>제목</th>
                <th>개봉 날짜</th>
                <th>평점</th>
                <th>삭제</th>
                </tr>
            </thead>
            <tbody>
            {movieList.map((movie, i)=>{
                return(<tr key={i}>
                <td>{movie.no}</td>
                <td>{movie.movieTitle}</td>
                <td>{movie.openDate}</td>
                <td>{movie.rating}</td>
                <td><button>삭제</button></td>
                </tr>
                );
            })}
            </tbody>
            </table>
        </fieldset>
        </div>
    </>);
}

export default MovieList

 

App.css

fieldset{
    border: 1px solid gray;
    background: beige;
}