생활코딩 react (17.3. 컴포넌트 이벤트 만들기)

# React-17.3. 컴포넌트 이벤트 만들기

 - 17.1 사용자 이벤트를 추가하여 App에서 선언한 이벤트를 Subject에서 호출하면, Article에 Subject의 내용 표시

 - 17.2 Toc의 요소를 선택하면 App의 mode 속성을 변경하도록 이벤트 등록

 - 17.3 : Toc의 요소를 선택하면 변경된 mode에 맞춰 Article에 표시할 정보 구성 및 Toc 이벤트와 컨텐츠의 클릭 이벤트 사이 정보전달

 

1. Toc 컨텐츠의 선택을 가정하고, 선택한 컨텐츠의 표시정보 구성

1.1. App에 Toc에서 선택한 요소를 처리하는 속성 추가

: src\App.js - constructor의 state에 속성추가
select_content_id:2,

1.2. 추가한 속성을 기준으로 read에 해당하는 render의 표시정보를 동적으로 설정

 - 반복문을 이용한 기준속성에 맞는 표시정보 설정

: src\App.js - render에서 read 속성에 따라 Article에 표시할 정보 설정

(임시 설정정보)
_title = this.state.contents[0].title;
_desc = this.state.contents[0].desc;

(동적 설정정보)
var i=0;
while (i < this.state.contents.length) {
  var data = this.state.contents[i];
  if(data.id === this.state.select_content_id){
    _title = data.title;
    _desc = data.desc; 
    break;
  }
  i = i + 1;
}

 > App 의 state에 선언왼 select_content_id의 값에 따라 toc에 등록된 contents 정보가 Article에 표시됨

2. Toc 이벤트와 컨텐츠의 클릭 이벤트 사이 정보전달

2.1 Toc 클릭시 이벤트에 선택한 정보 전달

:src\App.js - retun의 toc 요소에 선언된 onChangePage 이벤트에서 select_content_id 값을 변경하여 Article 표시정보를 설정
 - 임시값 설정
onChangePage={function(){
  this.setState({
    mode:'read',
    select_content_id:0
  });
}.bind(this)}

2.2 Toc 클릭이벤트를 이용하여 App 컴포넌트에서 정의한 onChangePage 이벤트를 실행할 때, 식별정보 전달

2.2.1 HTML 요소의 속성을 이용한 정보전달

 - data-id=식별정보 추가

 - onClick 함수에서 이벤트 객체를 이용한 data-id 정보 참조

 > e.tartet.dateset.id 참조정보를 onChangePage 함수의 파라미터로 전달 ( 주의 : 전달 정보의 자료형 맞춤)

 * 클릭이벤트의 이벤트객체 확인

:src\components\TOC.js render에서 contents 코드를 구성할 때, 
 클릭이벤트가 App에서 정의한 사용자이벤트를 호출하며 식별정보를 전달할 수 있도록
 a 테그에 data-id 속성을 추가하고, 
 클릭이벤트에서 해당 속성의 정보를 onChangePage 함수의 파라미터로 전달함
<a 
  href={"/content/"+data[i].id}
  data-id={data[i].id}
  onClick={function(e){
    e.preventDefault();
    this.props.onChangePage(e.target.dataset.id);
  }.bind(this)}
>{data[i].title}</a>

2.2.2 bind를 이용한 정보전달

 - 바인드의 두번째 인자(this 다음)로 값을 선언하면, 함수의 첫번째 인자로 참조 가능

 > 바인드의 this 속성은 고정이며, 뒤에 붙는 정보는 함수의 첫번째 부터 파라미터로 정의하고, 마지막에 이벤트 객체를 선언함.

: src\components\TOC.js - 바인드에 인자를 추가하고, 함수에서 파라미터로 추가한 인자를 참조
 - 순서 주의 (this 이후의 인자를 함수 첫 파라미터부터 선언하고, 이벤트객체를 함수의 마지막 파라미터로 선언)
<a 
  href={"/content/"+data[i].id}
  data-id={data[i].id}
  onClick={function(id, title, e){
    e.preventDefault();
    this.props.onChangePage(e.target.dataset.id);
  }.bind(this, data[i].id), data[i].title}
>{data[i].title}</a>

 

(정리)

Toc의 컨텐츠를 선택한다.

선택한 컨텐츠의 식별정보를 사용자 이벤트에 전달한다.

사용자 이벤트에서 대상정보를 화면에 표시한다.

 

(참고)

* 클릭시 함수의 이벤트객체(e) 참조방법

 - e.preventDefault(); 클릭 이벤트 실행에 따른 화면 새로고침 등의 이벤트 동작을 제한하는 기능

 - e.target : 이벤트가 발생한 HTML 요소(a 테그)

 - e.target.dateset : 이벤트를 발생한 HTML 요소(a)의 속성 중 data 속성으로 정의된 속성값(data-id) 참조

 > e.target.dataset.id : data-id 속성

* 이벤트객체의 속성으로 데이터를 참조할 때

, - data 뒤에 이름을 부여하여 해당 이름으로 target의 dateset 요소를 참조한다.

  > data-참조명 : e.target.dateset.참조명