React

[Kossie Coder] 영화 삭제하기 - filter를 이용해서 삭제한 id 가 아닌 영화들 return하기

// 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([]);🌟 🌟const removeMovie = (id) => { // 삭제한 영화의 id가 아닌 영화들만 보여주기 setMovies( movies.filter((movie) => { return movie.id !== id; }) ); };🌟 const renderMovies = movies.length ? movies..

[Kossie Coder] 영화 삭제하기 - 현재 시간 id로 저장

// 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([]); 🌟const removeMovie = (id) => { console.log(id); // 삭제 버튼 클릭 시 영화 추가할 때 id로 저장한 값 출력 };🌟 const renderMovies = movies.length ? movies.map((movie) => { 🌟// 현재 시간을 담은 id를 키값으로 설정🌟 re..

[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 ; }); 🌟const addMovie = (mo..

[Kossie Coder] 자식 컴포넌트에 데이터 보내기2 - props (props 생략)

// App.js import React from 'react'; import './index.css'; 🌟import Movie from './components/Movie';🌟 function App() { const movies = [ { title: 'Lami1', year: 2001 }, { title: 'Lami2', year: 2002 }, { title: 'Lami3', year: 2003 }, ]; const renderMovies = movies.map((movie) => { 🌟return ;🌟 // map을 사용하기 때문에 유니크한 키 필요 }); return ( Movie list {renderMovies} ); } export default App; // Movie.js impor..

[Kossie Coder] map을 이용한 리액트 반복문

// App.js import React from 'react'; import './index.css'; function App() { const movies = [ { title: 'Lami1', year: 2001 }, { title: 'Lami2', year: 2002 }, { title: 'Lami3', year: 2003 }, ]; const renderMovies = movies.map((movie) => { return ( // map을 이용할 때는 유니크한 키 필요 {movie.title} {movie.year} ); }); return ( Movie list {renderMovies} ); } export default App; // index.css .movie { display: fl..

useEffect()

setState() vs. useState()

[Kossie Coder] 조건에 따라 컨텐츠 다르게 보여주기 - 조건 렌더링

// App.js import React, { useState, useEffect } from 'react'; import './index.css'; function App() { const [condition, setCondition] = useState(false); const toggle = () => setCondition(!condition); useEffect(() => { console.log('condition :>> ', condition); }, [condition]); const renderCondition = condition ? 'True' : 'False'; return ( Lami {renderCondition} Toggle ); } export default App; /* 유..

[Kossie Coder] 자식 컴포넌트에 데이터 보내기 - props

// App.js import React, { useState } from 'react'; 🌟import Counter from './components/Counter';🌟 function App() { const [buttonName, setButtonName] = useState('클릭'); const clickButton = () => { setButtonName('click'); }; return ( Lami 🌟🌟 🌟🌟 Click ); } export default App; // App.js 기준 ./components/Counter.js import React, { useState } from 'react'; const Counter = (props) => { const [count, setCo..

[Kossie Coder] useEffect

// App.js import React, { useEffect, useState } from 'react'; function App() { const [count, setCount] = useState(0); const [lami, setLami] = useState(0); useEffect(() => { console.log('count', count, 'lami', lami); }, [count]); useEffect(() => { console.log('first rendering'); }, []); const increment = () => { setCount(count + 1); }; return ( Lami Click setLami(lami + 1)}>Click1 ); } export def..