분류 전체보기 (183) 썸네일형 리스트형 #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.. 리액트 10강 state일반 JavaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨사용자와의 상호작용을 통해 화면이 바뀌는 경우에 useState 를 사용 하여 "상태 관리"를 가능하게 하는 객체 import React, { useState } from "react"; // import useState//useState라는 것을 통해서 react의 state라는 것을 만들 수 있음function Counter() { const [number, setNumber] = useState(0); //숫자의 값을 만드는 부분, useState함수 사용 //기본값을 입력으로 받음, 이 기본값은 state가 가지게 될 기본값 //기본값을.. 리액트 9강 hello.js에 있는 name을 아무리 바꿔도 app.js에 있는 name은 바뀌지 않음props는 “부모 컴포넌트”에서 “자식 컴포넌트”로 보내주는 값이기에 자식 컴포넌트를 바꿔도 부모 컴포넌트는 바뀌지 않음 함수의 파라미터로 변수를 전달해주는 것이기에 app에 있는 name의 값이 복사alt + shift + f -> 코드정리우리가 만든 컴포넌트로 다른 컴포넌트를 감싸주려면 반드시 감싸는 컴포넌트가 프롭스로 children을 받아온 후 자신의 jsx표현식 안에 넣어줘야 함 import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';function App() { return ( .. #4.5 Saving Username username을 키벨류로 해서 브라우저에 저장하기 function onLoginSubmit(event){ event.preventDefault(); //새로고침되는 기본 동작을 막음 loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기 const username = loginInput.value; //입력받은 값을 username에 대입 localStorage.setItem("username",username); //localStorage를 이용하여 키벨류로 입력받은 username저장 greeting.innerText = `Hello ${username}`; //greeting(h1) 클래스리스트에 HELLO uae.. #4.4 Getting Username string과 변수를 합치는 방법 두번째 방법은 ``(백틱)기호로 묶어주고 변수를 ${}로 묶어줘야 함 greeting.innerText = "Hello " + username; //greeting.innerText = `Hello ${username}`; 똑같음 string과 변수를 하나로 합쳐줌 로그인 버튼을 누르면 로그인폼을 제거하고 사용자이름과 함께 hello메시지 출력하기 Log In const loginForm = document.querySelector(".login-form"); const loginInput = document.querySelector(".login-form input"); const greeting = document.querySelector("#greeting"); c.. #4.3 Events part Two addEventListener안에 있는 함수는 직접 실행하지 않음, 브라우저가 실행시켜 주는 것, 실행하면서 event에 관한 정보도 담아줌 정보를 담아줄수 있는 파라미터를 만들고, 그 파라미터는 preventDefault처럼 몇가지 함수도 실행가능함 const link = document.querySelector("a"); function onLinkClick(event){ event.preventDefault(); //링크를 클릭하면 해당사이트로 이동하는 기본동작을 막음 console.dir(event); } link.addEventListener("click",onLinkClick); 리액트 8강 props : propertise의 준말, 컴포넌트에 어떤 값을 전달할때 사용하는 것코드 중간에 중괄호가 있으면 자바스크립트 표현식이 들어간 것컴포넌트에 어떤 값을 전달하려면 반드시 어떤 어트리뷰트에 값을 넣어주고, props를 이용해서그 어트리뷰트를 받을 수 있음//app.jsimport React from 'react';import Hello from './Hello';function App() {return ( //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당);}export default App;//Hello.jsimport React from 'react';function Hello(props) {return Hello, {props.name} //hello라는 컴.. 이전 1 ··· 17 18 19 20 21 22 23 다음