본문 바로가기

분류 전체보기

 (101)
#6.0 Quotes 랜덤 명언 불러오기 const quotes = [{ quote:"하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다", author:"사무엘존슨" },{ quote:"삶이 있는 한 희망은 있다", author:"키케로" },{ quote:"언제나 현재에 집중할수 있다면 행복할것이다.", author:"파울로 코엘료" },{ quote:"행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다", author:"헬렌켈러" },{ quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에", author:"엘사 맥스웰" },{ quote:"절대 어제를 후회하지 마라. 인생은 오늘의 나 안에 있고 내일은 스스로 만드는..
리액트 13강 useEffect 우리가 호출을 하는 훅이 아닌 자동으로 호출이 되는 훅 컴포넌트가 마운트가 되고 dom이 변경 된 다음 렌더링 발생 후 실행됨 언제 필요하냐? props 에 속한 값을 컴포넌트의 로컬 변수로 선언 API 호출하여 통신을 통해 값을 받아오거나 받은 값을 state에 값을 넣어주나 할 때 사용 서드파티 라이브러리 사용 즉, 렌더링이 다 되면 화면에 요소들이 나타나고 그 다음 다시 한번 데이터를 변경할 때 사용하는 것 아래 코드에서 제목이 알아서 바뀐다는 것이 핵심 -> 제목은 useeffect에서 바뀌는것 import React, { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(..
리액트 12강 React Hook useState도 React Hook임 기존에 사용하던 클래스 컴포넌트의 여러 기능들을 자연스럽게 함수형 컴포넌트에서 사용하기 위한 장치 클래스형 컴포넌트 스테이트, 라이프사이클 직접 다룰수 있음 진입장벽, 복잡한 코드 즉 함수형 컴포넌트가 기존의 클래스형 컴포넌트를 완전히 대체할 수 있도록 하는 기능 리액트의 생명주기(Life Cycle) 리액트는 컴포넌트가 화면에 렌더링되는 과정을 생명주기를 이용해 관리 마운팅 -> DOM에 컴포넌트가 등록되는 과정 컨스트럭터 : 우리가 만드는 컴포넌트가 생겨나는 과정, 함수정의할때의 과정 랜더링 : 브라우저의 DOM에 어떤 객체가 들어가서 브라우저 화면에 나타나도록 하는 것 업데이팅 -> 등록된 컴포넌트의 내용이 업데이트되는 과정 언마운팅 -> ..
리액트 11강 onChange가 엘리먼트의 이벤트->이를 함수 onTextChange 에서 e 라는 파라미터로 받아올 수 있고, e.target 은 이벤트가 발생한 DOM 을 가리킴 setInputs 부분 스프레드를 통해 inputs 객체를 복사한 다음, name 키의 값만 업데이트 여러 스테이트를 다루는 경우, 리액트는 기존 state 변수를 대체하기 때문에 다른 state 변수의 손실을 막기 위해 이런 방법을 사용 import React, { useState } from "react"; function input() { // eslint-disable-next-line react-hooks/rules-of-hooks const [inputs, setInputs] = useState({ subject: "", sco..
#5.2 PadStart PadStart : 문자열 길이를 정해진 수로 조정해줌, String을 현재보다 길게 만들어야 할 때 사용 function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2,0); //문자열로 변환 후, const minutes = String(date.getMinutes()).padStart(2,0);//문자열을 2개로 맞춰주고 문자열이 2보다 작다면 앞에 0붙임 const seconds = String(date.getSeconds()).padStart(2,0); clock.innerText = `${hours}:${minutes}:${seconds}`; }
#5.1 Timeouts and Dates setTimeout(sayHello, 5000); //5초 후에 함수가 실행됨 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}` } getClock(); //즉시 호출해서 바로 시간을 볼 수 있게 setInterval(getClock, 1000);
#5.0 Intervals Interval '매번'일어나야 하는 무언가 2초마다 무슨 일이 일어나게 하고 싶다-> 이럴때 Interval을 사용 1초 === 1000ms const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello,5000)//실행하고자 하는 함수, 함수가 호출되는 간격(ms)
#4.6 Loading Username 반복되는 string은 변수로 저장 Username을 기억해두고 새로고침해도 사라지지 않도록 저장하기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기 const USERNAME_KEY = "username"; function onLoginSubmit(event){ const userNameType = loginInput.value; ev..

티스토리툴바