생활코딩 : React - 컴포넌트 이벤트 : onChangePage 이벤트 생산자가 되다 (17강)

이벤트 강의에서 한 것 : Subject.js 파일에 있던 코드를 App.js의 Subject 컴포넌트가 있던 자리에 복붙해서 작업했다.

 

옮겨놨던 코드를 비활성화 한다. 그리고 원래 Subject 컴포넌트 코드를 돌려 놓는다.

 

이벤트 생산자가 된다!

[제목을 클릭했을 때, welcome화면으로 바꾸고 싶다]

 

[Subject 컴포넌트는 onChangePage라는 이벤트가 있어서

이 컴포넌트 안에서 링크를 클릭했을 때, 이벤트에 설치한 함수를 설치하도록 만든다]

 

App.js 에서 Subject 컴포넌트에 onChangePage 이벤트를 입력한다.

onChangePage라는 함수는 props의 형태로 Subject.js에 전달된다.

 

Subject.js 에서

a 태그를 onClick 했을때, 함수가 실행되고, 첫번째 인자로 e(vent) 객체가 전달된다.

e.preventDefault()를 호출해서 링크 클릭했을 때 페이지 바뀌는 것을 막는다.

 

App.js 에서

Subject 컴포넌트의 onChangePage로 함수가 전달된다.

그 함수(onChangePage)를 Subject.js 안에 onClick 함수 안에서 호출해준다.

 

결과 : 경고창이 뜨고 페이지도 바뀌지 않았다.

 

정리 : Subject 컴포넌트에 onChangePage라는 이벤트를 내가 만들었다. 

그 이벤트에 함수를 설치해주면, (App.js)

그 이벤트가 발생(클릭)되었을 때, props로 전달된 onChangePage()함수를 호출하면 된다. (Subject.js)

결과로 경고창이 떴다. (onChangePage()함수의 출력값)

 

 

이제 alert() 대신 this.setState( {mode: 'welcome'} ); 함수를 넣으면,

클릭했을 때 read화면에서 welcome 화면으로 바뀐다!

 

onChangePage라는 이벤트를 만드는 생산자가 되어 사용자에게 제공했다.

 

 

 

---

[목록을 클릭하면 해당 내용이 나오게 하고 싶다] ep1

 

App.js 안에 

TOC 컴포넌트 안에도 onChangePage 이벤트 넣는다.

 

onChangePage라는 props를 TOC 안에서 받아야 한다.

 

TOC.js 안에

리스트 링크 부분 a 태그 안에 onClick 함수를 넣어준다. 그리고 onChangePage()를 props로 받는다.

경고창이 잘 뜬다.

 

App.js 에서

TOC 컴포넌트에서 state 의 mode 값을 read로 바꿔준다.

 

결과 : 목록을 클릭하면 read 화면으로 바뀐다!

 

 

 

---

[목록을 클릭하면 해당 내용이 나오게 하고 싶다] ep2

 

계획 : 

App 컴포넌트의 state에 selected content id 이름을 줘서 선택된 내용을 표시한다.

그 값을 바탕으로해서 contents 객체의 id값과 일치하는 것을 본문 영역에  표시한다.

 

 

App.js에서

App 컴포넌트의 state에 selected_content_id : 2 기본적으로 2번이 선택되게 한다.

 

 

mode : read 일때, 즉 else if일때, 반복문을 쓴다.

data 변수에 값 지정한다.

contents 객체의 id값 =  selected content id값 일치하면 본문 표시한다.

break함수로 강제로 끝나고 바깥쪽 내용 실행한다.

 

App.js 안에서

return 안에 있는 TOC 컴포넌트(리스트)에 onChangePage 이벤트가 발생했을 때,

this.setState를 통해서 mode와 함께 selected_content_id도 바꾸게 해준다.(코드 추가한다)

 

그러기 위해서는 onChangePage 이벤트 실행시키는 부분인

TOC.js 안에서

onClick을 했을 때, props를 실행시키는 것을 통해서 onChangePage() 실행시킨다.

(TOC가 App.js에 있는 함수 실행한다.)

즉, 실행시킬 때 인자로 선택한 id값을 주면 된다!

 

data-id={ data[i].id } 라는 속성을 준다.

e.target : 이벤트가 소지하고 있는 태그인 a 태그를 가리킨다.

data-id값을 접속한다. = dataset의 id값이다.

즉, e.target.dataset.id이다. 콘솔에 입력하면 "2"라고 문자열로 나온다.

 

알아낸 이 값을 인자로써 onChangePage()함수에 넣어준다.

 

App.js 안에서

TOC 컴포넌트에서

onChangePage에서 함수에 id라는 매개변수 준다.

그 id 값 그대로 selected_content_id에 준다.

 

그런데 content객체에서는 숫자이므로 문자형을 숫자로 바꿔준다.

selected_content_id: Number(id)

 

 

 

결과 : 리스트 누르면 해당 내용 본문에 표시된다.

 

정리 : onClick 이벤트를 실행시킬 때, e의 target의 dataset의 id를 통해서 값을 추출한다.