반응형 front19 생활코딩 react (17.2. 컴포넌트 이벤트 만들기) # React-17.2. 컴포넌트 이벤트 만들기 - 17.1 사용자 이벤트를 추가하여 App에서 선언한 이벤트를 Subject에서 호출하면, Article에 Subject의 내용 표시 - 17.2 : Toc의 요소를 선택하면 App의 mode 속성을 변경하도록 이벤트 등록 1. App.js에서 호출하는 Toc 테그의 속성(props)으로 이벤트를 선언한다. :src\App.js return의 Toc props에 사용자 이벤트 추가 onChangePage={function(){ alert('hello.Toc'); }.bind(this)} 2. Subject.js에서 render로 호출하는 list 요소의 링크 속성에 앞서 선언한 이벤트를 호출한다. src\components\TOC.js return에서 생.. 2021. 8. 30. 생활코딩 react (17.1. 컴포넌트 이벤트 만들기) # React-17.1. 컴포넌트 이벤트 만들기 - 17.1 : 사용자 이벤트를 추가하여 App에서 선언한 이벤트를 Subject에서 호출하면, Article에 Subject의 내용 표시 * 앞서 App.js에서 임시로 작성한 subject의 동작을 이벤트를 이용하여 subject에서 처리되도록 이벤트 만들기 - subject의 title인 'WEB'을 클릭했을 때, 이벤트를 만들어서 처리하자. 1.1 App.js에서 호출하는 Subject 테그의 속성(props)으로 이벤트를 선언한다. :src\App.js return의 Subject props에 사용자 이벤트 추가 onChangePage={function(){ alert('hello'); }.bind(this)} 1.2 Subject.js에서 ren.. 2021. 8. 30. 생활코딩 react (16.5-이벤트 setState 함수 이해하기) # React-16.5. 이벤트 setState 함수 이해하기 * 이벤트에서 state 변경 - 이벤트에서 컴포넌트의 state를 변경하기 위해 bind로 state 정보를 전달해야 함 1.1 전달된 state 정보의 비정상 변경방법 - mode 값이 변경되지만, react가 인지하는 정상적인 방법이 아닌 관계로 > render를 다시 호출하지 않음 (변경 결과가 컴포넌트에 적용되지 않음) this.state.mode = 'welcome'; 1.2 전달된 state 정보의 정상 변경방법 - mode 값이 변경되며 react가 인지하여 변경 결과가 적용됨 > render를 호출하여 새로고침 실행 this.setState({ mode:'welcome' }); 2021. 8. 25. 생활코딩 react (16.4-이벤트 bind 함수 이해하기) # React-16.4. 이벤트 bind 함수 이해하기 * 바인딩 : bind는 함수밖에 선언한 정보를 참조할 수 있도록 함수에 주입해준다 - 개발자 도구 콘솔 테스트 // bintTest()에서는 함수 밖에서 선언한 obj를 참조할 수 없다 var obj = {name:'jkoogi'}; > undefined function bindTest(){ console.log(this.name); } > undefined bindTest(); > undefined // bind는 함수밖에 선언한 정보를 참조할 수 있도록 함수에 주입해준다 var bindTest2 = bindTest.bind(obj); > undefined bindTest2(); > jkoogi > undefined / 바인딩 문법을 확인한다. .. 2021. 8. 25. 생활코딩 react (16.3-이벤트에서 state 변경하기) # React-16.3. 이벤트에서 state 변경하기 이벤트 내에서 컴포넌트의 정보를 바인딩 하여 사용 할 때, 직접 변경할 수 없고, 함수형태로 변경해야 한다. 1. App으로 옮겨온 subject의 title 클릭시 mode로 정의한 state를 read로 변경 1.1 오류발생 코드 - 이벤트가 호출된 상태의 this는 이벤트의 상태를 참조한다. (컴포넌트에 설정된 state를 사용할 수 없음 : src\App.js - render 로 옮겨온 subject 코드의 이벤트 수정 onClick={function(e){ console.log(e); e.preventDefault(); this.state.mode = 'welcome'; }} 1.2 이벤트에 컴포넌트의 this를 전달 - 오류는 발생하지 않.. 2021. 8. 25. 생활코딩 react (16.2-이벤트 설치) # React-16.2. 이벤트 설치 * subject와 toc의 title 클릭시 app의 state를 통해 article 영역(본문)에 해당 컨텐츠를 표시 1. subject 의내용을 풀어서 app에 적용 : src\components\Subject.js - render()의 return 코드 {this.props.title} {this.props.sub} : src\App.js return의 아래 내용을 대체 : src\App.js return에 적용한 코드 {this.state.subject.title} {this.state.subject.sub} 2. 이벤트 적용 : 1차 적용 이벤트 - 실행 후 화면이 다시 로딩된다. onClick={function(){ alert('hi'); }} : 2차 .. 2021. 8. 25. 이전 1 2 3 4 다음 반응형
