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 요소를 참조한다.
- 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에서 생성하는 리스트의 a테그 속성에서 이벤트 사용
onClick={function(e){
e.preventDefault();
this.props.onChangePage();
}.bind(this)}
1.3 생성한 이벤트:onChangePage() 에서 모드를 수정하여 Article의 내용이 변경되는지 확인
(정리)
:src\App.js - render()의 return 요소 중 subject porps에 사용자 이벤트 추가
<Toc
onChangePage={function(){
this.setState({mode:'read'});
}.bind(this)}
data={this.state.contents}
></Toc>
:src\components\Toc.js retun 요소로 생생하는 리스트의 a테그에 App에 추가한 사용자이벤트를 사용하는 이벤트 추가
lists.push(
<li key={data[i].id}>
<a
href={"/content/"+data[i].id}
onClick={function(e){
e.preventDefault();
this.props.onChangePage();
}.bind(this)}
>{data[i].title}</a>
</li>);
:src\App.js return의 Subject props에 사용자 이벤트 추가
onChangePage={function(){
alert('hello');
}.bind(this)}
1.2 Subject.js에서 render로 호출하는 title 의 링크 속성에 앞서 선언한 이벤트를 호출한다.
- this.props.onChangePage();
:src\components\Subject.js return의 a테그 속성에서 이벤트 사용
onClick={function(e){
e.preventDefault();
this.props.onChangePage();
}.bind(this)}
1.3 생성한 이벤트:onChangePage() 에서 모드를 수정하여 Article의 내용이 변경되는지 확인
:src\App.js return의 Subject props에 추가한 이벤트 수정
onChangePage={function(){
this.setState({mode:'welcome'});
}.bind(this)}
(정리)
:src\App.js - render()의 return 요소 중 subject porps에 사용자 이벤트 추가
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}
onChangePage={function(){
this.setState({mode:'welcome'});
}.bind(this)}
></Subject>
:src\components\Subject.js retun 요소 중 a테그에 App에 추가한 사용자이벤트 사용 이벤트 추가
<header>
<h1><a href="/" onClick={function(e){
e.preventDefault();
this.props.onChangePage();
}.bind(this)}>{this.props.title}</a></h1>
{this.props.sub}
</header>
* subject와 toc의 title 클릭시 app의 state를 통해 article 영역(본문)에 해당 컨텐츠를 표시
1. subject 의내용을 풀어서 app에 적용
: src\components\Subject.js - render()의 return 코드
<header>
<h1><a href="/">{this.props.title}</a></h1>
{this.props.sub}
</header>
: src\App.js return의 아래 내용을 대체
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
: src\App.js return에 적용한 코드
<header>
<h1><a href="/">{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>
2. 이벤트 적용
: 1차 적용 이벤트 - 실행 후 화면이 다시 로딩된다.
onClick={function(){
alert('hi');
}}
: 2차 적용 이벤트 - 디버그로 로그 표시 (콘솔에서 e.preventDefault(); 로 새로고침 제한 테스트)
onClick={function(e){
console.log(e);
debugger;
}}
: 3차 적용 이벤트 - 화면 새로고침 방지 이벤트 적용
onClick={function(e){
console.log(e);
e.preventDefault();
}}
- subject title을 클릭하면 e.preventDefault로 인해 새로고침이 되지 않음
