Yuniverse

달러를 입력하면 그걸로 암호화폐를 얼만큼 살 수 있는지 계산해주는 coin tracker를 만들어보자. https://api.coinpaprika.com/v1/tickers API를 사용했다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [money, setMoney] = useState(); const [price, setPrice] = useState(); const onChange = (event) => { setMoney(event.target.value); }; con..

import { useState } from "react"; function App() { const [todo, setTodo] = useState(""); const [todos, setTodos] = useState([]); const [editingTodoId, setEditingTodoId] = useState(null); const [editingTodoContent, setEditingTodoContent] = useState(""); const onChange = (event) => setTodo(event.target.value); //추가 const onSubmit = (event) => { event.preventDefault(); if (todo.trim() === "") { ret..

다음 코드는 버튼을 누를 때마다 counter가 하나씩 올라가며 콘솔창에 render를 출력한다. state가 변할 때마다 매번 console.log가 실행된다. import { useState } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev + 1); console.log("render"); return ( {counter} click me ); } export default App; 그런데 만약 api로 데이터를 받아오는 상황이라면 처음 컴포넌트를 실행하여 데이터를 받아온 후에도 state가 변할 때마다 계속 api를 불러오게 된..

1. Create React App Create React App은 리액트 어플리케이션을 만드는 최고의 방식으로 수많은 스크립트와 사전 설정들을 미리 준비해준다. 개발 서버에 접근하거나 자동으로 새로고침 또는 즉각적으로 css 적용 등의 기능들이 있다. 일단 먼저 node.js가 설치되어야 한다. nodejs.org에서 os에 맞는 nodejs를 다운받자. 그리고 터미널에서 node -v를 입력해 제대로 설치가 되었는지 확인하자. 이후 터미널에 npx create-react-app 폴더명 을 입력해 폴더를 생성하고 npm start를 입력해 개발 서버가 열림을 확인하자. src 폴더에서 불필요한 파일들을 지우고 index.js 와 App.js만 남기자. (App.test.js, App.css, index..

먼저 두 개의 버튼을 만들어 보자. function SaveBtn() { return Save; } function ConfirmBtn() { return Confirm; } function App() { return ( ) } const root = document.getElementById("root"); ReactDOM.render(, root); 위와 같은 상황에서 만약 버튼에 같은 style을 추가하고 싶다면 복사 붙여넣기로 각각 추가해줘야 할 것이다. 그런데 각각 style을 추가해주는 대신 같은 설정들을 넘겨줄 수 있는 컴포넌트를 한 개만 만들어 재사용한다면 훨씬 효율적일 것이다. 다음과 같이 바꿔보자. function Btn({text, big}) { return {text} ; } fun..

1. minutes -> hours 먼저 분을 시간으로 바꿔주는 코드를 작성해보자. function App(){ const [minutes, setMinutes] = React.useState(); const onChange = (event) => { setMinutes(event.target.value); }; const reset = () => { setMinutes(0); }; return( minutes hours Reset ); } const root = document.getElementById("root"); ReactDOM.render(, root); 먼저 label는 클릭하면 해당 input에 입력할 수 있도록 하는 태그다. input의 id 값을 htmlFor 에 넣어주면 되는데 여기서..

Vanilla JS와 React JS로 click me 버튼을 클릭하면 total clicks의 수가 하나씩 증가하는 기능을 각각 만들어 비교해보자. Vanilla JS total clicks : 0 click me const button = document.getElementById('button'); const h3 = document.querySelector('h3'); let counter = 0; function handleClick() { counter += 1; h3.innerText = `total clicks : ${counter}`; } button.addEventListener('click', handleClick); Vanilla JS는 html을 만들고 js로 가져와서 다시 htm..

1. Object shorthand assignment let name = "yuni" let age = "20" //다음과 같이 객체를 선언할 때 let person = { name: name, age: age } //key와 value의 이름이 같다면 다음과 같이 줄여서 쓸 수 있다 let person = { name, age } 2. Destructuring let person = { name: "yuni", age: 20 } //객체 안의 값을 변수에 할당할 때 let name = person.name let age = person['age'] //다음과 같이 줄여서 표현 가능하다 let {name, age} = person //객체에서 가져오고 싶은 key를 {}안에 넣으면 key..