![]()
이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. 암호화폐들과 그 가격을 나열하는 단순한 프로젝트를 만들어 본다. [개요] 처음 페이지를 들어왔을 때 로딩 메시지가 보이고 코인들이 나열되면 로딩 메시지를 숨기고 코인들을 리스트로 보여준다. 로딩 import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The Coins! {loading ? Loading... : null} ); } export default App; 로딩 화면 API 사용 coinpaprika라는 API를 사용한다. https://api.coinpaprika...
![]()
이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. 코드 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; } setToDo(""); }; return ( Add To Do ); } export default App; 현재 위 코드에서 t..
![]()
이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. Introduction 우리는 Component가 처음 render될 때만 코드가 실행되길 원할 수 있다. 즉, 첫 번째 render에만 코드가 실행되고, 다른 state 변화에서는 실행되지 않도록 하고 싶다. 예를 들어, API를 통해 데이터를 가져올 때 첫 번째 component render에서 API를 호출하고 이후 state가 변화할 때는 해당 데이터를 다시 가져오지 않아도 되는 경우가 존재한다. 예제 코드 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setVal..
