React :: state를 사용하여 Event 구현하기

위 화면과 같이 링크 클릭시 내용이 바뀌는 이벤트를

state를 사용하여 만들어보자.

 

 

---

  이벤트 등록  

 

컴포넌트에서 props 함수를 onclick으로 등록

 onClick={ ( ) => { props.function } } 

 

호출한 컴포넌트에 onClick으로 실행할 함수를 Props로 지정

 function={ onclick 으로 실행할 함수 } 

여기서는 함수의 이름을 onChangePage로 설정.

 

---

  State로 props 조작하기  

state에 내용 지정.

 

내용이 들어갈 컴포넌트인 Content의 props를 

변수 _title과 _desc로 줄거임.

_title과 _desc는 state에 따라 값이 변화함.

 

 

import { Component } from "react";
import "./App.css";

function Subject(props) {
  return (
    <div className="header">
      <h1>
        <a
          href="/"
          onClick={e => {
            e.preventDefault();
            props.onChangePage();
          }}
        >
          {props.title}
        </a>
      </h1>
      <p>{props.sub}</p>
    </div>
  );
}

function TOC(props) {
  return (
    <li>
      <a
        href={`/content/${props.id}`}
        onClick={e => {
          e.preventDefault();
          props.onChangePage();
        }}
      >
        {props.list}
      </a>
    </li>
  );
}

function Content(props) {
  return (
    <section>
      <h2>{props.title}</h2>
      <p>{props.desc}</p>
    </section>
  );
}

class App extends Component {
  state = {
    mode: "welcome",
    selected_content_id: 1,
    subject: { title: "WEB", sub: "Hello World!" },
    welcome: { title: "Welcome", desc: "Hello, React!" },
    contents: [
      { id: 1, title: "HTML", desc: "HTML is HyperTexk Markup Language." },
      { id: 2, title: "CSS", desc: "CSS is for design" },
      { id: 3, title: "JavaScript", desc: "JavaScript is for interactive" },
    ],
  };

  changeMode(modeState) {
    this.setState({mode: modeState});
  }

  changeContent(content_id) {
    this.setState({selected_content_id: content_id});
  }

  render() {
    const { mode, subject, contents, welcome, selected_content_id } = this.state;
    let _title = null;
    let _desc = null;
    
    if (mode === "welcome") {
      _title = welcome.title;
      _desc = welcome.desc;
    } else if (mode === "read") {
      const selected_content = contents.find(content => content.id == selected_content_id)
      _title = selected_content.title;
      _desc = selected_content.desc;
    }

    return (
      <div className="App">
        <header>
          <Subject
            title={subject.title}
            sub={subject.sub}
            onChangePage={() => this.changeMode('welcome')}
          />
          <nav>
            <ul>
              {contents.map(content => (
                <TOC
                  key={content.id}
                  list={content.title}
                  onChangePage={() => {
                    this.changeMode('read');
                    this.changeContent(content.id);
                  }}
                />
              ))}
            </ul>
          </nav>
        </header>
        <Content title={_title} desc={_desc} />
      </div>
    );
  }
}

export default App;