React(12) 컴포넌트 이벤트 만들기

오늘할일

- WEB을 클릭하면 welcome모드가 되며 내용이 나오고 

- HTML, CSS, JavaScript를 클릭하면 read모드가 되어 세부내용이 나오는 페이지 만들기 

클릭시 모드가 달라지며 해당 컨텐츠가 표시된다.

 

App.js - <Subject>

사용자가 WEB 링크를 클릭했을 때 이벤트가 실행되도록 하고 싶다면,

- onChangePage라는 props를 만들어준다. 그 안에 핸들러메소드 넣고 + 바인드함수를 사용해 this를 명시해준다

- 핸들러 메소드 안에는 this.setState({mode:'welcome'});을적어주어서 state, 즉 모드를 바꾼다.

 

Subject.js

- <a>안에 onClick 이벤트를 심어준다. 

- onClick이벤트 안에 e.preventDefault를 사용해 이벤트 동작을 멈춘다.

- 이어서 this.props.onChangePage(); 로 onChangePage()함수 호출을 해준다. (페이지변경)

- bind()함수를 통해 this를 명시해주며 마무으리 

**코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

class Subject extends Component {

  render() {

    console.log('Subject render');  

    return(    

      <header>

        <h1>

          <a href="/" onClick={function(e){

            e.preventDefault();

            this.props.onChangePage();

          }.bind(this)}>{this.props.title}</a>

        </h1>

        {this.props.sub}

      </header>

    );

  }

}

export default Subject;

---

 

App.js

컨텐츠 링크를 클릭하면 모드가 read로 바뀌며 해당 컨텐츠 내용이 나오게 하려면,

 

- state영역에서, 선택될 id로 selected_content_id:1 추가하기

 

- render함수영역에서, 

 

  if문에서 (mode가=== read)일 때, 

  while문으로 콘텐츠.length 만큼 반복시키고 

      data라는 변수에 = 선택한 contents 원소를 넣고 

      if data.id가 selected_content_id이면

         해당 id의 data 타이틀이랑 내용을 놓으시오

         break; 로 원하는걸 얻었으면 냅다 탈출함

 

- render 리턴할때,

  <Main>태그안에 prop으로 onChangePage추가

  하위링크들이 들어갈 자리니깐 모드를 read로 해줘야겠지 

  그안에 selected_content_id:Number(id) 문자열로 표기되는 id가 → 강제형변환으로 숫자형으로 변경된다.

 

**코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

import Subject from "./components/Subject.js";

import Main from "./components/Main.js";

import Content from "./components/Content.js";

import './App.css';

 

class App extends Component {

  constructor(props){

    super(props);

    this.state = {   

      mode:'read', 

      selected_content_id:1, 

      head:{title:'WEB', sub:'world wide web!'},

      welcome:{title:'Welcome', desc:'Hello, React!!'},

      contents:[

        {id:1, title:'HTML', desc:'HTML is for information'},

        {id:2, title:'CSS', desc:'CSS is for design'},

        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}      

      ]

    }

  }

 

  render() {

    console.log('App render');

    var _title, _desc = null;

    if(this.state.mode ===  'welcome'){

      _title = this.state.welcome.title;

      _desc = this.state.welcome.desc;

    } else if(this.state.mode === 'read'){

      var i = 0;

      while(i < this.state.contents.length){

        var data = this.state.contents[i];

        if(data.id === this.state.selected_content_id) {

          _title = data.title;

          _desc = data.desc;

          break;

        }

        i = i + 1;

      }

    }

    return(

      <div className="App">

        <Subject 

          title={this.state.head.title} 

          sub={this.state.head.sub}

          onChangePage={function(){

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

          }.bind(this)}>

        </Subject>        

        <Main 

          onChangePage={function(id){

            this.setState({

              mode:'read',

              selected_content_id:Number(id)

            });

          }.bind(this)}

          data={this.state.contents}>

        </Main>

        <Content title={_title} desc={_desc}></Content>

      </div>

    );

  }

}

export default App;

---

 

Main.js

위에서 살펴본 <main onChangePage={}>를 실행시키는 이벤트에 대해 Main.js로 건너와 리뷰해보자

- <a>태그 안에 data-id라는 prop을 넣어줌.

  (후에 -id부호를 사용한 속성은 target.dataset(id)을 통해 id값에 접근할 수 있음)

 

- on Click 이벤트를 정의한다. 인자로는 (e)를 받는다. (그래야 뒤따라오는 dataset속성을 사용하니깐)

 

- 핸들러메소드 안에 this.props.onChagePage함수 (e.target.datatset.id)를 인자로 넣어준다. (페이지 변경해야하니깐)

  e라는 객체의 target 속성은 → 이벤트 발생한 해당 <a></a> 태그전체를 의미

  target속성 중 dataset으로 → 데이터 값을 알아낼 수 있다.

 

그래서 onChangePage에 알아낸 id값을 매개변수로 주면 저 함수가실행되며 해당 아이디에 해당하는 콘텐츠를 가지고 온다. 

 

**코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

 

class Main extends Component {

    render() {

      console.log('Main 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} 

              data-id={data[i].id}

              onClick={function(e){

                e.preventDefault();

                this.props.onChangePage(e.target.dataset.id);

              }.bind(this)}>

                {data[i].title}

            </a>

          </li>

        );

        i = i+1;

      }    

      return(

        <nav>

          <ul>

             {lists}

          </ul>

        </nav>

      );

    }

}

export default Main;

---

 

**data-*이란

- 태그에서 그 값을 저장하고 자바스크립트 코드에서 target.dataset(데이터이름)으로 값을 읽을 수 있다.

- 데이터에 대한 확장 가능성을 염두에 두고 디자인되었으며, 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 

- data-* 속성은 추가 정보를 저장할 수 있도록 해준다.

  (화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담을 수 있음. 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 말자)

 

data 사용법이 있습니다

<article id="electriccars"

          data-columns="3"

          data-index-number="12314"

          data-parent="cars"> ... </article>

 

ref website

developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0