React/React 기본11 [생활코딩] React - 컴포넌트 이벤트 만들기 태그에 이벤트를 직접 만들어서 그 태그, 컴퍼넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 하는 방법이 있다. (이벤트의 소비자가 아닌 생성자) 다시 원래대로 돌려놓고 이 subject라고 하는 컴퍼넌트는 onChangePage라는 이벤트가 있어서 이 컴퍼넌트 안에서 링크를 클릭했을 때 이벤트에 설치한 함수를 호출하도록 만들것이다. onChangePage 함수는 어떤 형태로 subject로 전달될까? 바로 props 실행됐을 때 첫 번째 인자로 이벤트 객체가 전달되는데, 그 객체에 preventDefault()를 실행해서 페이지가 새로고침 되는것을 방지한다. WEB을 클릭해보면 아래 코드와 같이 경고창이 잘 뜬다. 경고창이 뜨도록 만든 부분의 코드를 아래와 같이 수정해보자. 그러면 클릭시 m.. 2020. 8. 20. [생활코딩] 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. [생활코딩] React - 이벤트 state props 그리고 render 함수 리스트의 각각 링크에는 이벤트를 설치할거다. 일단 state설정부터 해보자. 현재 우리가 보고 있는 페이지가 웰컴 페이지인지, 읽기 페이지인지 구분하기 위해서 state에 mode라는 값을 줄거다. 리액트에서는 state의 값이 바뀌면 그 state를 가지고 있는 컴퍼넌트에 render함수가 다시 호출된다. 다시 호출됨에 따라서 그 render함수 하위에 있는 컴퍼넌트들도 render함수가 있는데 각각 싹 호출이 된다. (화면이 다시 그려지는것) render가 하는 역할은 어떤 html을 그릴것인가를 결정한다. 그래서 props나 state가 바뀌면 화면이 다시 그려진다. 모드의 값에 따라서 만들어지는 랜더링 결과가 달라지게 조건문을 사용해보겠다. 모드가 read라면? ※ 본 포스팅은 개인 공부 기록을 .. 2020. 8. 15. 이전 1 2 3 다음
