이번에는 암호화폐들과 가격을 나열해보자. 먼저 useEffect를 사용할 것인데 페이지나 앱을 들어왔을 때 로딩 메세지가 보이고, 코인들이 나열되면, 로딩메세지를 숨기고 코인들을 리스트로 보여주도록해보자! 로딩을 위하는것, 코인 리스트를 잠시가지고 있기 위한 state를 만들어서 해보자~! import { useState } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The Coins {loading ? Loading... : null} ); } export default App; 아래의 링크에 접속하여 api를 사용해보자. https://api.coinpaprika.com/v1/tickers ..

Map이란? 다음과 같이 array가 있을때, 가끔 각각의 element를 바꾸고 싶을 때가 있다. element들을 다 바꾸고 싶고, 다 바뀐 새로운 array를 가지고 싶을 때 map은 () 안에 함수를 넣을 수 있도록해주는데 - 이 함수는 array의 모든 item에 대해 실행될거다! 어떤 것을 return해도 그 값이 새로운 array안에 들어갈것이다. :)를 return하면 모든 6개의 값이 :) 로 변하는 것을 확인할 수 있다. map이란? 하나의 aray에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 함 - 결국 새로운 array로 return해주는 것이다! 근데 여기서는 이것이 쓸모가 없다는 것이다.. - 기존의 것들을 쓰지 못하게 하니까말이야.. 근데, map 함수의 첫번째 ..

오늘은 아주 간단한 To Do List를 만들어보자~! 먼저 input창으로 console에 찍어내보자! import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); return ( ); } export default App; 그럼 다음과 같이 출력되는 것을 확인할 수 있다. 자 그럼 이 input을 form안에 넣고, 버튼도 추가로 넣어보자. 그리고 버튼을 클릭하면 form으로 submit기능을 구현해보자. 현재는 버튼을 클릭하면 새로고침만 된다. 자 그러면 onSubmi..

오늘은 Cleanup 함수를 배워보자. 아래와 같이 코드를 import { useEffect, useState } from "react"; function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? "Hide" : "Show"} ); } export default App; show, hide 버튼이 클릭시, 계속 바뀌도록 구성하였다. 그리고 다음과 같이 Hello 컴포넌트를 만들어서 import { useEffect, useState } from "react"; function Hello() { return Hello; } ..

React의 useEffect의 첫번째 argument는 우리가 실행시키고 싶은 코드이고, 두번째 argument는! Dependencies라고! Dependencies는 React.js가 지켜보아야하는 것들이다! 그래서 아래의 첫번째는 빈배열로 첫번째에만 실행, 두번째는 keyword만 변경되었을 때에만 실행 두번째는 counter만 변경되었을 때에만 실행 두번째는 keyword 또는 counter 변경되었을 때에만 실행 useEffect(() => { console.log("I run only once."); }, []); useEffect(() => { console.log("I run when 'keyword' changes."); }, [keyword]); useEffect(() => { con..

오늘은 Search Bar를 만들어보자. import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((pre) => pre + 1); const onChange = (event) => setKeyword(event.target.value); console.log("I run all the time"); useEffect(() => { console.log("Call the API..."); }, []); return ( {counter} Click ..