react Props와 State2 그리고 이벤트함수(Study)

1. react애서는 props의 값이나 state의 값이 바뀌면 해당되는 컴포넌트의 render() 함수가 호출되도록 약속되어 있다. 즉 props나 state가 바뀌면 화면이 다시 그려진다.

아래 코드를 보면,

  constructor(props) {
    super(props);
    this.state = {
      mode: "welcome",
      subject: { 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" },
      ],
    };
  }

state에는 mode, welcome 등이 포함되어 있다.

더 아래 코드를 보면

  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") {
      _title = this.state.contents[1].title;
      _desc = this.state.contents[1].desc;
    }
    return (
      <div className="App">
        <header>
          <h1>
            <a
              href="/"
              onClick={function (e) {
                e.preventDefault();
              }}
            >
              {this.state.subject.title}
            </a>
          </h1>
          {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents} />
        <Content title={_title} desc={_desc} />
      </div>
    );
  }

mode state의 값이 welcome인지, read인지에 따라서 값을 if문 분기처리하고 있다.

분기에 따라서 welcome state의 title과 desc의 값이 들어가거나,
comtents state의 title과 desc의 값이 들어가도록 되어 있다.

render(){ ... } 부분을 보게 되면...
Content 컴포넌트 부분에서 해당 분기처리하여 값을 할당 받은
_title, _desc의 값이 호출되고 있다.

2. 이벤트 함수

또 a태그를 보면 JavaScript 함수가 쓰여 있다.

            <a
              href="/"
              onClick={function (e) {
                e.preventDefault();
              }}
            >
              {this.state.subject.title}
            </a>

여기에 onClick 속성이 쓰여 있는데,
리액트에서는 'c'가 대문자 'C'이다.
여기서 JavaScript 익명 함수를 정의하고 호출하고 있다.

그래서 클릭을 하게 되면
onclick 함수가 실행되게 되는데...
참고로 a태그이기 때문에 새로고침이 발생한다.
그래서 기본동작을 취소? 제거? 아무 동작을 안하게끔 하기 위해서
매개변수에 e를 넣고,
e.preventDefault()를 호출한다.
여기서 클릭이벤트의 기본동작 함수...인가? 그런듯 하다.

이제

클릭 시 이벤트가 발생한다.