분류 전체보기142 [React] 7-2. React와 api를 이용해 coin tracker 앱 만들어 보기 📌 암호화폐들과 그 가격을 나열하는 앱 만들기 우리가 원하는 것은 페이지나 앱을 들어왔을 때 로딩 메세지가 보이고, 코인들이 보이면 로딩 메세지를 숨기고 코인들을 리스트로 쭉 보여주는 것이다. 1. 로딩을 위한 state를 정의한다. loading의 초깃값은 true로 설정해 주었다. 그리고 loading이 true일 경우 화면에 Loading을 띄우고, 그렇지 않을 경우 아무것도 반환하지 않는 삼항 연산자를 이용한 코드를 작성해 주었다. import { useState } from "react"; function App() { const [loading, setLoading] = useState(true); // 주목! return ( The Coins! {loading ? Loading... : nu.. 2023. 6. 7. [React] 7-1. React로 간단한 todo list 만들어 보기 (2) 📌 To Do List 이어서 만들기 ❗지난 시간에서 헷갈릴 만한 내용 state를 수정할 때 직접 수정이 불가하므로 modifier 함수를 이용하여 값을 전해주는 방식을 사용하였다. -인자로 문자열, 숫자 같은 특정 값을 전달해주는 경우 state를 바로 그 값으로 업데이트 할 수 있다. - 인자로 함수를 보내는 경우 modifier 함수의 인자로 보내는 함수의 첫 번째 인자는 현재 state 값을 받아온다. 우리는 전 시간에 이 현재 state값을 이용하여 새로운 state 값을 반환해주는 함수를 인자로 사용하였다. 6. 입력한 todo 각각을 컴포넌트로 만들어 본다. toDo들은 toDos라는 하나의 배열에 모두 저장되도록 하였다. 이 배열에 map 함수를 적용하여 각각의 toDo들을 list로 만.. 2023. 6. 2. [React] 7-0. React로 간단한 todo list 만들어 보기 (1) 📌 지금까지 배운 개념으로 to do list 만들어 보기 지금까지 배운 useState, useEffect, props 등의 개념을 이용하여 간단하게 todo list를 만들어 볼 것이다. 1. 할 일을 적는 입력란을 만들기 위해 input을 생성하였고, input의 상태를 관리하기 위해 toDo 변수와 modifier인 setToDo를 생성해 주었다. import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); // 주목! return ( {/*주목!*/} ); } export default App; 2. input에 onChange eventlistener를 추가하여 input의 값.. 2023. 6. 2. [React] 6-3. Cleanup 함수 알아보기 📌 Cleanup 자주 쓰이지는 않는 함수이지만 알아둘 필요가 있다. hide와 show를 하는 버튼을 만들어 보겠다. import { useState, useEffect } from "react"; function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? "Hide" : "Show"} ); } export default App; 초기 상태는 showing이 false인 상태이고, 버튼을 클릭하면 버튼 안의 텍스트가 현재 Show면 Hide로, 현재 Hide이면 Show로 바꾸는 코드이다. 아직은 텍스트만 바뀌는 버튼을 만.. 2023. 6. 2. 이전 1 ··· 24 25 26 27 28 29 30 ··· 36 다음
