- subject 컴포넌트를 주석처리 하고 APP에 직접 꺼내서 이벤트를 테스트 하였다.
이제 Subject 컴포넌트에 이벤트를 설치해보자.
즉 Subject props로 기존의 title, sub을 더하여 이벤트 함수인 onChangePage를 props에 추가한다. 그러면 Subject에서 props값을 받아 onChangePage함수를 실행할 수 있을 것이다.
이벤트 객체로 a태그의 동작을 막고 전달 받은 props중 함수 onChangePage를 실행시킨다.
그 결과 onChangePage함수가 정상적으로 실행된다.
즉 Subject에 Onchangepage라는 이벤트를 우리가 만들었고 이것을 props로 전달하였다. Subject 컴포넌트에서 해당 props를 실행하면 된다.
onchangePage 함수를 변경해보자 그러면 잘 된다.
- TOC 컴포넌트도 바꿔보자
TOC 컴포넌트에서 li태그를 눌렸을 때 state값이 read로 변하게 한다.
a태그에다 onClick이벤트를 만들고 a태그 동작을 막고 전달받은 props중 이벤트 함수를 실행시킨다. 그러면 정상적으로 read로 변경된다.
- TOC에서 li태그를 선택하면 Content 컴포넌트에 선택한 li태그의 본문값을 출력하도록 해보자
selected_content_id값을 state변수에 추가한다. 테스트 용도로 2를 초기화 하자.
render함수를 보자 mode가 read일 때 state변수에 content id중 selected_Contend_id와 일치하는 값을 찾고 title, desc을 저장한다.
그 결과 2번째 li태그인 CSS의 title과 desc가 Content컴포넌트에 출력된다.
- TOC.js에서 선택한 id값을 이벤트 함수 인자로 넘겨주자
data-id props에 id값을 저장한 것을 볼 수 있다. 또한
e는 이벤트 객체이고 e.target을 하게 되면 a태그를 가리킨다. 또한 dataset은 data props를 가리키고 id는 data props에서 id값을 가리킨다. 즉 선택한 id값이 인자로 들어가진다.
정상적으로 작동한다.
setState함수를 통해 state변수 중 selected_content_id값을 변경했다. 넘어올 때 문자열로 넘어 왔으므로 숫자로 형변환을 시켜준다.
정상적으로 작동한다.
- 다른 방법
전에는 e.target을 하여 a태그에서 props의 dataset에서 id값을 가져왔다면 bind에서 직접 data[i].id값을 주입시키는 것이다. 그러면 function에서 첫 번째 인자로 들어오게 된다. 만약
2개를 주입하고 싶다면 function에 차례대로 받아오면 된다.
알고리즘 정리 블로그입니다.