분류 전체보기 (101) 썸네일형 리스트형 리액트 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.js import React from 'react'; import Hello from './Hello'; function App() { return ( //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당 ); } export default App; //Hello.js import React from 'react'; function Hello(props) { return Hello, {props.nam.. 리액트 7강 클래스형 컴포넌트 반드시 render()함수가 정의되어야 함 render함수는 반드시 JSX를 리턴하는 부분을 포함해야 복잡하고 어려움 mport React from "react"; class App extends React.Component { //React.Component를 상속받는 App이라는 클래스 render() { return Hello, React!; } } export default App; 함수형 컴포넌트 function키워드, 함수이름, 함수 내부에서 JSX를 리턴하는 부분만 있으면 됨 클래스형 컴포넌트보다 훨씬 간결하고 직관적 최신 react버전에서는 함수형 컴포넌트 사용을 권장 클래스에서만 사용할 수 있던 state를 react-hook으로 구현가능해져서 함수형 사용 functio.. #4.2 Events 모든 EventListener function의 첫번째 파라미터는 항상 방금 발생한 event들에 관한 정보임 submit되면 페이지 전체가 새로고침되는 기본 동작 막기 기본행동 : 어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작 const loginForm = document.querySelector(".login-form"); const loginInput = document.querySelector(".login-form input"); function onLoginSubmit(event){ //함수의 파라미터를 명시해주면(어떤이름이든 상관x) 자바스크립트에서 event를 채워줌 event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않게 막는 것 //form을 s.. 이전 1 ··· 7 8 9 10 11 12 13 다음