들어가기 전에

 이전 시간에 <Subject> 컴포넌트에 "onChagePage" 라고 하는 이벤트를 만들어서 사용자에게 제공했습니다.

이번 시간에는 글 목록을 클릭했을 때 <APP> 컴포넌트의 state mode를 read라고 바꾸고

클릭한 contents가 본문에 나오도록 만들어보겠습니다.

학습목표

컴포넌트에 원하는 이벤트를 만들고, 이렇게 만들어진 이벤트를 적절히 응용할 수 있습니다.

핵심단어

• event
• state
• props

강의 듣기

이번 시간에는 글 목록을 클릭했을 때 <APP> 컴포넌트의 state "mode"를 "read"로 바꾸고 

클릭한 글 목록에 해당하는 contents 내용이 본문에 나오도록 만들어보겠습니다.

우선 <TOC> 컴포넌트에 onChagePage와 똑같은 이름의 경고창을 보여주는 이벤트를 만들겠습니다.

onChangePage={ function() {
  alert('hi');
}.bind(this) }

이렇게 생성한 onChagePage 이벤트 <TOC> 컴포넌트 안에서 props 형태로 전달받을 수 있습니다.

lists.push(
  <li key={data[i].id}>
    <a 
       href={"/content"+data[i].id}
       onClick={function(e) {
          e.preventDefault();
          this.props.onChagePage();
       }.bind(this) }
     >{data[i].title}</a>
  </li>);

<TOC> 컴포넌트 안에 각각의 목록에 해당하는 <li> 부분에 링크를 클릭했을 때 onClick 이벤트가 실행됩니다.

이벤트가 실행될 때 페이지가 바뀌지 않도록 하기 위해서 e.preventDefault() 함수를 추가했습니다.

this.props.onChagePage(); 라고 props 형태로 onChangePage() 함수를 실행시켜 정상적으로 작동하게 됩니다.

onChangePage={ function() {
  this.setState( {mode: 'read'} );
}.bind(this) }

이벤트가 정상적으로 작동하는 것을 확인했고, <APP> 컴포넌트의 state "mode"의 값을 "read"로 바꿔주도록 코드를 수정했습니다.

이제 링크를 mode라는 state가 변하는 것을 확인할 수 있게 되었습니다.

생각해보기

 다음 시간에는 선택한 글목록에 해당하는 내용이 본문에 나타나도록 만들어 볼 것입니다.

다음 시간을 시작하기 전에 독립할 수 있는 방법들을 사용해서 어떻게 코드를 수정할 수 있을지 고민해보세요.