컴포넌트 이벤트 만들기

이전에는 그냥 <header> 태그 안에 코드를 넣어서 단순히 사용하는 방식을 사용했다. 하지만 이번에는 컴포넌트를 이용해서 정리해보는 시간을 가졌다.

이미 Subject라는 컴포넌트는 다른 곳에 만들어두었고, subject 컴포넌트는 아래와 같다.

 

subject.js

우선 Subject.js를 살펴보자. 그러면 이전에 한 곳에 만들었었던 onclick 이벤트를 사용해서 기존의 이벤트를 막는 preventDefault()를 사용한 다음, this.props.onChangePage() 함수를 사용하여 이 onChangePage 함수를 실행할 수 있도록 한다. 그리고 뒤에는 이 컴포넌트 객체 자신을 가리킬 수 있도록 함수 뒤에 .bind(this)를 추가해준다.

 

그리고 나서 다시 App.js를 살펴보자.

App.js

Subject 컴포넌트를 물러온 모습이고, 여기에 props로 title, sub가 기본적으로 존재하고, 부가적으로 onChangePage props가 추가되었다. 여기서 이 속성을 함수로 만들어서, 이 함수에 안에 setState를 사용하여 mode를 welcome으로 바꿔준다. 여기서 주의할 점은 또 bind(this)를 빼먹으면 안된다는 것이다. 이렇게 하면 mode가 welcome으로 바뀌면서 리액트 화면 내에서도 바뀌는 것을 확인할 수 있다.

 

이제 우리의 목표는 클릭을 했을 때, 그에 맞는 제목과 내용이 나오게 하는 홈페이지를 만들고 싶다.

저번에 복습할 때 state와 prop를 잘 안써서 그런지 아직은 좀 생소하다. 다음에는 한 번 써보려고 해 봐야겠다.

일단, 처음에는 2번의 아이디를 가지고 있을 때를 화면에 나타내기 위해서 기본 id를 2번으로 설정한 모습이다.

 

화면을 불러오는 과정을 처리할 때, 2번의 아이디를 가진 (현재는 기본 아이디가 2번이기 때문에) 것을 화면에 표시해야 하기 때문에 while문으로 처리한다. mode가 read일 경우, 안의 while문을 보면, i부터 State의 contents 길이만큼 돌게 되는데, 변수 data라는 것을 만들어서 각각의 순서대로의 data를 담게 한다. 그리고 이 data의 id가 현재 기본 아이디(2번)과 일치하면 title과 내용을 이 content에 넣고 break를 한다. 이렇게 되면 해당 아이디의 내용이 화면에 나타나게 되는 것이다.

 

이 과정을 거쳤으면 다음으로는 아까 했듯이, 클릭에 따라 화면이 바뀌어야 하므로 클릭 이벤트를 설치해준다. 클릭 이벤트가 일어나는 list는 TOC 라는 컴포넌트로, 내용은 아래와 같다.

TOC 컴포넌트에 onChagePage라는 이벤트를 설치해주고, 이 안에 setState 함수로 mode와 selected_content_id 값을 바꿔준다. 그러나 지금은 현재 0이라고 간단히 해 놓았지만, 이것이 동적으로 동작하기 위해서는 받아오는 아이디 값이 계속 바뀌어야 한다. 이 바뀌는 아이디 값을 받아아오는 방법은 따로 있다.

 

아이디를 동적으로 받아오기 전에, TOC 컴포넌트 안에도 onChagePage() 함수를 onClick 이벤트를 설치해 설치하는 것을 잊지 말자. 이 부분을 생략하면 이벤트가 일어나지 않음을 명심하자.

이 부분에서 이제 우리가 클릭한 객체가 어떤 아이디를 가지고 있는지를 알아내야 한다. 그러면, 현재 객체의 id를 알아야 하는데... 이것을 디버거로 접근해보면 e.target.dataset.id 에 현재 객체의 아이디 정보를 얻을 수 있게 된다.

.

.

.

 

그리고 이렇게 얻은 id를 App.js에 있는 TOC 컴포넌트의 onChagePage의 함수에 인자로 넘겨주어, setState안의 selected_content_id 값에 이 인자의 id 값을 넘겨주면 된다. 여기서 주의할 점, 화면이 바뀌지 않는 결과가 나타났는데 이유는 이 id 값이 넘어오면서 문자 값으로 바뀌었기 때문이다. 이 부분은 js의 형변환 함수 Number() 함수를 쓰면 해결이 된다. 화면이 클릭에 따라 잘 바뀌는 것을 알 수 있다.

 

 

(+) 또 다른 인자 넣는 방법

위와 같이 bind() 함수에 인자를 넣어서 사용할 수도 있다. 이 방법이 더 간편하기는 하지만 어떤 방법을 쓸지는 개인의 자유이다. 단, bind 함수에 하나씩 인자가 추가되면, 두 번째 함수는 첫 번째 인자가 된다. 한 칸씩 밀리는 형식을 생각하면 된다.

 

이번주 이벤트 분야의 강의는 모두 완료했다.