차근차근 배움터

기본 틀에서 다시 로딩 구현 부분과 API Fetch 부분을 연습해 본다 영화 목록을 가져온다 import { useState, useEffect } from 'react'; function App() { return ( ); } export default App; api url https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { console.log(json); setM..

https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 이 영화 api 정보들을 가지고 만들어본다 then 보다 자주 사용하는 최신 async-await useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { setMovies(json.data.movies) setLoading(false); }); }, []); 아래와 같이 변경할 수 있다 흠... 외워야 하나 const getMovies = async () => { const ..

기존 코드 ※ 숙제 삭제 기능 구현하기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); } const onSubmit = (event) => { event.preventDefault(); if (toDo === "") return; setToDos((currentArr) => [toDo, ...currentArr]); setToDo(""); } const deleteItem = (event) => { console.log..

map() ['1','2','3'].map((current)=>current+'zzz'); // 결과 // ['1zzz', '2zzz', '3zzz'] map은 하나의 array에 있는 item을 내가 원하는 것으로 바꾸는 역할을 하고 새로운 array를 준다 map() 함수는 첫번째 arument로 현재의 item을 가져올 수 있다 또한 index도 사용 가능! const fruits = ['orange', 'banana', 'kiwi']; fruits.map((c, i)=> `${i+1}. ${c}`); // 결과 ['1. orange', '2. banana', '3. kiwi'] 경고 같은 component의 list를 render할 때는 key라는 prop을 넣어줘야 한다 고유한 key가 필요하다..

배운 것들을 복습하는 시간 ※ state를 직접 수정할 수 없다 toDos.push(); // 불가능 toDo = "" 잘못된 예 배열을 합칠 때 ... 이용하기 const food = [1,2,3,4,5]; const newFood = [100, ...food]; submit 동작을 막는 함수 event.preventDefault() 전체 코드 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); } console.log(t..

cleanup function 아래와 같이 created와 destroyed 컴포넌트의 생성과 종료를 확인할 수 있다 function Hello() { useEffect(() => { console.log('created :-)'); return () => { console.log('destroyed :'); } function hiFn() { console.log('hi :-)'); return byeFn; } useEffect(hiFn, []); return Hello } // 위의 코드를 아래 코드로 간단하게 변경 function Hello() { useEffect(() => { console.log('hi'); return function () { console.log('bye'); } }, []..

React.js가 멋진 이유 중에 하나는 component를 refresh 한다는 점이다. useEffect에 입력하는 두 가지 요소가 있는데, 하나는 실행 코드 그리고 다른 하나는 dependencies : react가 지켜봐야 하는 것들 그것들이 변화할 때 react.js에서 코드를 실행시킨다. 즉 두 번째 매개변수가 [] 이와 같이 빈 경우에는 React에서 지켜볼 사항이 없기 때문에 코드 실행 중에 처음으로 한 번 실행되고 만다. state가 변화할 때 component가 재실행되는 간단한 구조로 React가 작동한다. 모든 코드가 재실행 되는 것 UI의 관점에서는 새로운 데이터가 들어올 때 마다 자동으로 새로고침 되기 때문에 좋은 일이긴 하지만, 문제는 어떤 코드들은 이렇게 계속 계속 실행되면 ..

useEffect(()=>{ console.log("SEARCH FOR", keyword); }, [keyword] ); keyword의 부분이 keyword에 onChange할 때 실행하겠다는 의미가 된다. 1. useEffect() 한 번만 실행하는 경우 useEffect(() => { console.log('only once'); }, []); 2. useEffect() 특정 요소에 변화가 있을 때만 실행 useEffect(() => { console.log('counter has changed'); }, [counter]); 3. useEffect() 두 가지 요소에서 변화가 있을 때 useEffect(() => { console.log('counter or keyword has changed')..

한 번만 render 하고 싶은 경우? API를 가져오는 경우 어떻게 특정 코드들이 첫번째만 RENDER하도록 나머지 state가 변경되더라도 rerender 되지 않게 하는 방법을 알아본다. ※ state가 변경될 때 모든 코드가 다시 render 된다 가끔은 이것이 괜찮지만 가끔은 component 내부 몇몇 코드는 처음 딱 한 번 실행되고 다시 실행되지 않았으면 하는 것이 있을 것이다. useEffect 코드가 한 번만 실행하도록 해준다 import { useState, useEffect } from 'react'; import Button from './Button'; import styles from './App.module.css'; function App() { const [counter, ..

propTypes 설치 $ npm i prop-types module.css 전체 전역적인 css를 불러오는 것이 아닌 특정 요소에 필요한 style만 불러오고 싶을 때 module.css와 같은 방법을 이용할 수 있다. import styles from './Button.module.css'; function Button({ txt, bgc = 'red' }) { return ( {txt} ) } Button.moduel.css .btn { background-color: tomato; color: white; }