React 컴포넌트에 이벤트 만들기 2

이전 글과 같은 내용이다. 연습할 겸, 이해할겸 한 번 더 적어본다. 

 

TOC 컴포넌트에 이벤트를 넣을 것이다. 

똑같이 App 컴포넌트 안에 있는 TOC 컴포넌트에

 

<TOC onChangePage={function(e) {

          this.setState({mode:'read'});

          }.bind(this)}

          data={this.state.contents}>

</TOC>

onChangePage 라는 이벤트를 넣었다. 

setstate 는 클릭이벤트가 발생했을 때 mode 를 read 로 변경하기 위함이다. 

 

이제 TOC 컴포넌트 내부로 가서 함수를 만들어본다.

 

class TOC extends Component {

    render(){

      var lists = [];

      var data = this.props.data

      var i = 0;

      while( i < data.length){

        lists.push(

        <li key={data[i].id}>

          <a

          href={"/content/"+data[i].id}

          onClick={function(e){

            e.preventDefault();

            this.props.onChangePage();

          }.bind(this)}

          >{data[i].title} </a>

        </li>)

        i = i + 1;

      }

TOC 컴포넌트의 일부분이다. 

 

<a> 태그에 이벤트를 줘야 하기 때문에 data 옆 onClick 이라는 이벤트를 지정해준다. 

똑같이 this.props 로 onChangePage 이벤트를 받고, this 는 .bind() 를 통해 해당 컴포넌트임을

알려준다. 

 

여기까지는 쉬운 내용이라 금방 이해했지만 문제는 그 다음 

TOC 컴포넌트의 값의 mode 가 read 로 바뀌면서 안에 데이터를 바꾸는데

생각보다 이해가 잘 안된다. 좀 더 공부해야겠다. 

 

추가로 전에 공부했던 내용들을 정리해 보겠다. 

 

mode 통해 constructor 로 지정해 주었던 기본 값이 변경이 될 경우,

state 를 변경하는게 아니라 setstate 를 통해 값을 변경해주어야 한다. 

(단, constructor 내부의 내용을 바꾸는 거라면 state를 변경하는게 맞다. ) 

 

# 컴포넌트마다 적어줘야 하는 코드들 알아보기.

1. import React, { Component } from 'react'; 

=> react 에서 컴포넌트를 수입한다. 라고 이해했다. 

 

2. export default 컴포넌트 이름;

=> 해당 컴포넌트를 어디서든지 쓸 수 있게 해주는 코드이다. 

 

3. import TOC from " 파일경로 " ;

=> TOC 컴포넌트를 경로를 통해 수입한다. 라고 이해했다. 

 

,

,

,

 

여기까지 실습과 혼자 검색하면서 알게 된 내용들이고, 

오늘 create-react-app 으로 새로운 react 파일을 만들었다.

 

이 파일엔 전에 진행했던 airbnb 클론 코딩 자료를 조금씩 옮겨볼 생각이다.

많이 써봐야 익숙해 진다고, 틈틈히 컴포넌트로 저장해보고 css 파일도 만져보면서

천천히 접근해 볼 생각이다. 

 

멋쟁이 사자처럼 2기 지원마감이 되었고, 15일 1차 결과 발표를 기다리고 있다. 

제발 합격했으면 좋겠다. 요즘 자꾸 불안하고 긴장이 되는데, 아마도 이게 문제겠지...

15일까지는 뒤숭숭 하겠지만 합격하길 바래본다 ! 화이팅 !