리액트
[React.js] Kossie Coder - 13강. 영화 리스트 추가 폼 만들기 2
1. form 초기화 ... const addMovie = (event) => { ... setMovieTitle(''); setMovieYear(''); }; ... 2. 구조분해할당 ... const addMovie = (event) => { ... setMovies([ // ...(Object)를 붙이지 않으면 기존 movies 배열을 없어지고 새로운 값으로 덮어씌워진다. // 이를 막기 위해 ...(Object) 문법을 통해 기존의 배열에 새로운 요소를 추가하는 방법을 구조분해할당이라고 한다. ...movies, { title: movieTitle, year: movieYear } ]); }; ... 강의 링크 https://youtu.be/Z0Qcx-ZX7pY
[React.js] Kossie Coder - 12강. 영화 리스트 추가 폼 만들기 1
1. 배열의 state화 form의 입력값들을 state 변수로 받는다. Submit 시에 state 변수에 담긴 값들을 state의 배열 변수에 담는다. import React, {useState} from "react"; import Movie from "./components/Movie"; function App() { const [movieTitle, setMovieTitle] = useState(''); const [movieYear, setMovieYear] = useState(''); const [movies, setMovies] = useState([ {title: 'kossie coder1', year: 2001}, {title: 'kossie coder2', year: 2002}, {t..
[React.js] Kossie Coder - 11강. 컴포넌트와 props 데이터 보내기 복습
1. Movie Component import React from "react"; const Movie = ({movie}) => { return ( // 여기서는 key 값을 주지 않는다. {movie.title} {movie.year} ); }; export default Movie; 2. App.js ... const renderMovies = movies.map(movie => { return ( // 키 값을 컴포넌트에 달아주면 된다. ); }); ... 강의 링크 https://youtu.be/lzyXJWg7Tm4
[React.js] Kossie Coder - 10강. 리액트 반복문
1. map import React from "react"; function App() { const movies = [ {title: 'kossie coder1', year: 2001}, {title: 'kossie coder2', year: 2002}, {title: 'kossie coder3', year: 2003}, {title: 'kossie coder4', year: 2004} ]; // map을 이용해서 배열의 요소를 반복해서 return 가능하다. const renderMovies = movies.map(movie => { return ( // react에서 map을 사용할 때는 반드시 key값이 필요하다. // key값은 말 그대로 배열의 각 요소의 고유한 key를 가지면 된다. {mov..
[React.js] Kossie Coder - 9강. 조건 렌더링
1. 조건에 의한 값 변경 import React, {useState, useEffect} from "react"; function App() { const [condition, setCondition] = useState(false); const toggle = () => setCondition(!condition); useEffect(() => { console.log(condition); }, [condition]); const renderCondition = condition ? 'True' : 'False'; return ( {/* Toggle 버튼을 통해 state의 condition 값을 바꾸면 renderCondition에 의해 div 태그 내의 문자가 변경됨 */} {renderCondi..
[React.js] Kossie Coder - 8강. 자식 컴포넌트에 데이터 보내기 Props!
1. 자식 컴포넌트 import React, {useState} from "react"; // 파라미터에 props 변수 지정 const Counter = (props) => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const clickString = props.click || 'Click'; return ( {/* 부모 컴포넌트로부터 넘어오는 props 값에 의해 clickString 변수의 값이 지정되고 출력됨. */} {clickString} {count} ); }; export default Counter; 2. 부모 컴포넌트 import React from "react"; i..
[React.js] Kossie Coder - 7강. 컴포넌트로 반복 제거
1. Component 생성 Component를 사용하면 반복적인 코드를 재사용할 수 있다. import React, {useState} from "react"; const Counter = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( Click {count} ); }; export default Counter; 2. Component 사용 import React from "react"; import Counter from "./components/Counter"; function App() { return ( {/* 이런식으로 같은 컴포넌트를 여러 번 사용하여..
[React.js] Kossie Coder - 6강. useEffect 사용하기
1. useEffect 화면이 렌더링 될 때마다 실행되는 Hook import React, {useEffect, useState} from "react"; function App() { const [count, setCount] = useState(0); const [kossie, setKossie] = useState(0); // deps array에 count 변수를 넣어서 count가 rendering될 때만 실행되게 한다. // deps array를 쓰지 않으면 모든 rendering이 일어날 때마다 실행된다. useEffect(() => { console.log(count); }, [count]); // deps array를 empty로 주게 되면 단 한 번만 실행되게 한다. useEffect(..