React26 [생활코딩] React - 컴포넌트 이벤트 만들기 태그에 이벤트를 직접 만들어서 그 태그, 컴퍼넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 하는 방법이 있다. (이벤트의 소비자가 아닌 생성자) 다시 원래대로 돌려놓고 이 subject라고 하는 컴퍼넌트는 onChangePage라는 이벤트가 있어서 이 컴퍼넌트 안에서 링크를 클릭했을 때 이벤트에 설치한 함수를 호출하도록 만들것이다. onChangePage 함수는 어떤 형태로 subject로 전달될까? 바로 props 실행됐을 때 첫 번째 인자로 이벤트 객체가 전달되는데, 그 객체에 preventDefault()를 실행해서 페이지가 새로고침 되는것을 방지한다. WEB을 클릭해보면 아래 코드와 같이 경고창이 잘 뜬다. 경고창이 뜨도록 만든 부분의 코드를 아래와 같이 수정해보자. 그러면 클릭시 m.. 2020. 8. 20. [Hooks] 3. useInput 앞으로 만들게 될 hooks들의 다른점을 살펴보는 건 꽤 가치 있는 일이 될거다. 처음으로 다뤄볼 hooks는 useInput이다. useInput은 기본적으로 input을 업데이트 한다. 우선 초깃값을 받을거다. Mr.를 내 이름의 기본값으로 설정하자. 우리는 어떤 변화를 주기 전에, 이 기본값(Mr.)을 value와 함께 return하고 싶다. useInput은 value를 return 할거고 이제 name은 value랑 같아지고, 그런 다음 value는 name.value를 갖게 된다. Mr. 라는 값을 initialValue로 받아서 useState의 initalValue로 전달돼서 value로 잘 갈거다. onChange 함수를 만들어보자. 값을 입력하면 console.log에 아래와 같이 출력.. 2020. 8. 18. [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. 이전 1 2 3 4 5 ··· 7 다음
