Dev/React14 [React] #7.2 Coin Tracker import { useEffect, useState } from 'react'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [money, setMoney] = useState(""); const onChange = (event) => { setMoney(event.target.value); }; useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers?limit=10") .then((response)=> response.json()) .then((json) => { setCoins(json) set.. 2022. 6. 14. [React] #7.1 To Do List //App.js import { useState, useEffect } 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 ; }; // 절대 state를 직접적으로 수정하지 않는다. -> 함수를 사용해 수정 setToDos(currentArray => [toDo, ...currentArray]);// currentArray.. 2022. 6. 8. [React] #6.5 CleanUp import { useState, useEffect } from 'react'; function Hello() { useEffect(function () { // 기본 버전 console.log("hi :)"); return function () { console.log("bye :("); }; }, []); useEffect (() => { console.log("hi :)"); return () => console.log("bye :("); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing ((prev)=> !prev); return (.. 2022. 6. 7. [React] #6. useEffect //index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // App.js useEffect(실행하려는 코드, 지켜볼 항목 dependency); 지켜보는 항목이 존재하면 그 항목의 state가 변화할때만 실행된다. import styles from "./App.module.css" import { useState, useEffect } from 'react'; function App() { const [counter, setVal.. 2022. 5. 27. 이전 1 2 3 4 다음
