전체 글90 [Hooks] 2. Introduction to useState hooks 은 react의 state machine에 연결하는 기본적인 방법이다. 코드를 더 이쁘게 해주고 더이상 class를 사용하지 않고 모든것이 함수형 프로그래밍이 되는거다. 먼저 useState에 대해 알아보자. useState는 항상 2개의 value를 return 한다. useState는 Array를 return 해야된다. Array의 첫 번째 요소는 item, 두 번째 요소는 setItem이 되는거다. 예를들어서 만약 item만 사용하고 싶다면, const [item] = useState(1) 대신에 const item = useState(1)[0] 을 사용해야된다. incrementItem은 item의 값을 가져와서 +1을 해줄거다. import React, { useState } from.. 2020. 8. 18. [생활코딩] React - 이벤트 bind 함수 이해하기 / 이벤트 setState 함수 이해하기 render 함수 안에서 this는 render함수가 속해있는 컴퍼넌트 자체를 가리킨다. 그런데 함수안에서의 this는 아무것도 가리키지 않는다. 그래서 bind로 this를 강제로 주입하는거다. (.bind(this) 라는 함수를 뒤에 붙여 줌으로써 저안에 저 함수가 실행 될때 app클래스 하위에 있다라고 정해줘서 function함수가 실행될때의 this는 app클래스를 가르킬수 있지 않을까 생각해본다.) bind라고 하는 함수를 통해서 bindTest함수의 블럭 안에서 this는 obj가 된다. (이렇게 되는 새로운 함수가 복제돼서 만들어진다.) state를 함수의 형태로 바꿔야되는 이유를 배워보자. App이라는 컴퍼넌트가 생성될 때 가장 먼저 실행되는 constructor 함수에서는 state를 저.. 2020. 8. 18. [생활코딩] React - 이벤트 설치 / 이벤트에서 state 변경하기 Subject 안에있는 a 태그를 눌렀을 때 Subject 밖에 있는 App의 state를 바꾸는것이 최종적으로 할거다. Subject에 있는 저 부분을 복사해서 App의 Subject 자리에 붙여넣고 아래와 같이 수정한다. a라고 하는 링크를 클릭했을 때 어떤 자바스크립트 코드를 실행되게 할거다. 자바스크립트에서는 onclick인데 리액트에서는 onClick이라고 적는다. 그리고 문자로 묶는게 아니라 중괄호로 묶는다. 리액트는 함수가 실행될 때 함수의 첫 번째 파라미터의 값으로 이벤트라고 하는 객체를 주입해주기로 약속되어있다. 개발자 도구에서 디버거를 만나면 브라우져가 디버거라는 부분에서 실행을 멈추고, Sources 라는 페이지에서 여러가지 정보들을 보기 쉽게 해준다. e라는 객체에 preventDe.. 2020. 8. 18. [Vanilla-JS] 5. Changing Color / Brush Size 먼저 각 색상에 클래스를 정의한다. const colors = document.getElementsByClassName("jsColor"); console.log로 출력해보니 Array가 안나와서 array.from 메소드를 사용하겠다. (object로부터 array를 만든다.) console.log(Array.from(colors)); 우리가 원하는건 backgroundColor이다. 이제 context color를 변경해야 된다. 기본값이 검은색으로 되어있는 strokeStyle에 클릭한 색상의 값이 들어간다. color를 target으로부터 받아서 넣은 것 뿐이다. js파일에 jsRange 아이디를 추가하는 게 필요하다. const range = document.getElementById("jsRa.. 2020. 8. 17. 이전 1 2 3 4 5 6 7 8 ··· 23 다음
