[React] 이벤트, state 파고들기

이벤트를 사용해봤는데, 우리의 태그에 이벤트를 만들어서 그 태그, 컴포넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 해본 적은 없다.

 

이벤트의 생산자가 되어볼 차례!

 

<header>라는 코드는 원래 subject.js 안에 있던 코드이다.

지금은 subject.js 파일을 주석처리하고 내용을 바깥쪽으로 옮겨놓은 상태이다.

이제 이 코드를 비활성화하고 subject 컴포넌트 주석을 풀었다.

 

 

subject라는 컴포넌트를 사용할 때, 사용자가 링크를 클릭했을 때의 이벤트를 설치하고 싶을 때

onChangePage라고 하는 이벤트를 쓰세요, 하고 거기에 함수를 설치해놓는다.

사용설명서에는a태그 클릭되었을 때 설치한 함수를 실행해드릴게요 라고 적어놓는다.

 

정리) 우리가 만드려는 subject 컴포넌트는 onchangepage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이 이벤트에 설치한 함수를 호출하도록 만들려고 하는 것이다

 

onChagePage라는 함수는 어떤 형태로 subject에 전달이 될까??

=> props

 

subject.js에서는 props로 받은 함수를 호출하면 된다.

 

 

 

이번에는 목록에서 클릭한 것에 따라 본문 내용을 바꾸는 작업을 해볼 것이다.

TOC 컴포넌트에도 onChangePage라는 이름으로 이벤트를 설치했다. 그리고 TOC.js 안에서 onChangePage라는 props를 받아주어야 한다.

실행되는 함수 안에서도 똑같이 클릭했을 떄 페이지가 바뀌지 않도록 이벤트 객체를 받아서 객체의 preventDefault 함수를 넣었다. 나머지도 똑같이 props로 받아서 함수 이벤트를 호출한다.

지금 짜놓은 코드는 모든 목록이 눌렀을 때 hi 알림창이 뜨게 된다.

 

 

여기에는 App 컴포넌트의 state값을 read로 바꿔주는 작업이 들어간다.

이렇게 setState를 추가하고 웹 페이지에서 목록을 누르면 mode가 바뀌는 것을 개발자 콘솔에서 확인할 수 있다.

마찬가지로 WEB을 누르면 다시 welcome 모드로 바뀐다.

 

 

 

이제 목록에서 선택한 content가 본문에 나오도록 해볼 것이다

 

App컴포넌트의 state에 selectedContentId 와 같은 이름을 줘서 현재 선택된 content를 구분할 것이다.

기본값으로 2를 줬다. 그리고 App에서 render()를 실행할 때 while문으로 수를 하나씩 늘려가보면서 해당 id의 내용을 본문에 띄워준다. 기본값 설정으로만 본문 내용이 바뀌기 떄문에 클릭했을 때 바뀌도록 코드를 추가해주어야 한다.

 

 

중간정리를 해보자면 onChagePage를 실행시키는 부분은 TOC.js에서 onClick 했을 때 props를 실행하는 부분이다.

TOC가 App.js의 함수를 실행시키는 것!

여기서 인자로 우리가 클릭한 항목의 id 값을 주는 방법을 생각해볼 수 있다.

 

onClick 이벤트가 발생했을 때 e라고 하는 이벤트 객체에는 어떤 정보가 들어있을까?

TOC render() 함수에서 debugger를 쓰고 onclick 가 발생했을 떄의 이벤트 객체를 개발자 콘솔에서 확인해보았다.

코드가 나오면 esc를 눌러 개발자 콘솔을 켠다. 콘솔에서 e를 누르면 어떤 정보를 담고 있는지 확인할 수 있다.

 

여기서 중요한 속성은 target 인데 이 이벤트가 발생한 태그를 가리킨다.

이벤트 함수 내에서 e.target이라고 하면 이벤트가 가지고 있는 태그인 a 태그를 가리킨다.

a태그를 알아내면 여기서 또 data-id 값을 알아낼 수 있다.

그리고 data- 라는 접두사 시작하는 속성은 target 속성 안의 dataset 에서 접근할 수 있다.

이렇게 알아낸 값을 onChangePage를 호출할 때 인자로 넣어주면 된다.

 

App.js에서 받은 인자는 문자로 받아지는데 javascript에서 문자를 숫자로 바꾸는 함수는 Number를 사용해준다.

 

 

 

속성을 사용하지 않고도 id를 넘겨주는 방법이 있다.

bind에 data[i].id 정보를 onClick 에 연결된 함수의 첫번째 인자로 넘겨준다. 

(인자의 순서는 특성이다)