[Kossie Coder] 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기

// App.js

import React, { useState } from 'react';
import './index.css';
import Movie from './components/Movie';
🌟import MovieForm from './components/MovieForm';🌟

function App() {
  const [movies, setMovies] = useState([
    { title: 'Lami1', year: 2001 },
    { title: 'Lami2', year: 2002 },
    { title: 'Lami3', year: 2003 },
  ]);

  const renderMovies = movies.map((movie) => {
    return <Movie movie={movie} key={movie.title} />;
  });
  🌟const addMovie = (movie) => {
    setMovies([...movies, movie]); // 기존 movies 값 가져오고, movie 변화
  };🌟

  return (
    <div className="App">
      <h1>Movie list</h1>
      🌟<MovieForm addMovie={addMovie} /> // 기존에 만든 form을 컴포넌트로 만들어서 사용 
          // addMovie props로 넘겨줌 -> 자식컴포넌트에서 부모 컴포넌트 스테이트 변경하도록🌟
      {renderMovies}   
    </div>
  );
}
export default App;

// MovieForm.js

import React, { useState } from 'react';

🌟// 이 함수가 자식 컴포넌트에서 부모 컴토넌트 state 변경해주는 것🌟
const MovieForm = (**{ addMovie }**) => {
  const [movieTitle, setMovieTitle] = useState('');  🌟// 영화제목, 개봉연도 기본 빈칸🌟
  const [movieYear, setMovieYear] = useState('');

  const resetForm = () => {
    setMovieTitle('');  🌟// 영화추가 버튼 클릭 후 실행하는 함수🌟
    setMovieYear('');   🌟// 영화 추가 후 다시 빈칸으로 만들기🌟
  };

  const onSubmit = (event) => {  🌟// 영화추가 버튼 클릭 함수🌟
    event.preventDefault();
    🌟addMovie({   // 부모로부터 addMovie 함수 props로 받아와서 state 변경해주는 것
      title: movieTitle,
      year: movieYear,
    });🌟
    resetForm();
  };

  return (
    🌟<form onSubmit={onSubmit}> // 영화추가 버튼 클릭 시 onSubmit 함수 실행🌟
      <input
        type="text"
        value={movieTitle}
        placeholder="영화제목"
        onChange={(e) => setMovieTitle(e.target.value)}
      />
      <br />
      <input
        type="text"
        value={movieYear}
        placeholder="개봉연도"
        onChange={(e) => setMovieYear(e.target.value)}
      />
      <br />
      <button 🌟type="submit"🌟>영화추가</button> 🌟// type으로 submit이 있어서 form에서 onSubmit 함수 사용🌟
    </form>
  );
};

export default MovieForm;

 

폼을 컴포넌트로 분리해도 실행이 잘 됐음을 알 수 있음.

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */