만들고 싶은 이벤트는
1. h1태그 안의 단어를 클릭했을 때 (onClick/preventDefault)
2. mode가 welcome으로 변경되면서 (bind/setState)
3. content의 내용이 변경되는 이벤트 (이건 적지 않았다.)

1. onClick 이벤트

일단, 이벤트가 실행되어야 하는 a태그안에 onClick 속성을 넣어준다. 이때, jsx에서는onClick을 camelcase로 적어야 함을 주의하자. 또한, 속성값은 ""가 아닌 {}안에 넣어주어야함도 확인! 더불어, onClick되었을 때 작동할 내용을 적어주기 위해 함수까지 넣어주었다.

<header>
          <h1><a href="/" onClick={function () {
                //작동할 함수내용
          }}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

2. preventDefault()

a태그가 들어있는 h1을 클릭하면 href링크로 페이지가 이동하게 되는데, 이번 이벤트에서는 페이지 이동이 아니라 클릭시 content내용을 변경시킬 것이기 때문에,e.preventDefault()를 사용하여 클릭해도 페이지가 이동되지 않도록 할 수 있다.

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

3. bind()

a태그를 클릭하면 stat에 초기화 시켜준 mode값이 welcome으로 변경되어야 함으로, this.state.mode = 'welcome';을 적어 주었다. 그런데, 여기까지하면 오류가 난다.😅
이유를 찾기위해 render함수안에서 console.log(this)를 찍어보면 상위 컴포넌트 전체를 가르키지만, 지금 만들고 있는 이벤트 함수 안에서 console.log(this)를 찍으면 undefined가 뜬다는 것을 확인할 수 있다. 이럴때, .bind(this)를 함수 마지막에 적어주면 다시 this가 상위 컴포넌트 모두를 가르키게 된다. 그 이유는 차차 다시 알아가는것으로...🤔

<header>
          <h1><a href="/" onClick={function (e) {
            e.preventDefault();
            this.state.mode = 'welcome'; 
          }.bind(this)}>
            {this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

4. setState()

그런데도 오류가 뜬다? 그 이유는, 이벤트 함수안에서 this.state.mode = 'welcome';를 적어주었지만 react는 이걸 인식 못한다..컴포넌트 생성 이후 동적으로 state값을 변경해주려면, this.setState({mode:'welcome'})을 사용하여 state가 변경되었음을 알려주어야 한다!!👊🏻

<header>
          <h1><a href="/" onClick={function (e) {
            e.preventDefault();
            this.state.mode = 'welcome';
            this.setState({
              mode: 'welcome'
            }); 
          }.bind(this)}>
            {this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

그럼, react로 만든 첫 이벤트 완성 👻

5. 사실 이렇게 만들고 싶었던것이다.

위에서 만든 이벤트는 Subject컴포넌안에 담겼던 아이들을 App.js로 다 꺼내와서 만들었다. 이벤트 생성이 처음이기때문에 값을 다 펼쳐놓고 만듯것. 그런데 결국 state를 사용한 컴포넌트 안에서 이벤트를 만들어야 하므로, App.js에서 onChancgePage이벤트를 만들고 그안에 state가 변경되도록 함수를 만들어 주었다. 그리고 Subject.js에서 그 이벤트를 props로 불러오도록 만듬 ! 끄읕 !!!👻💕

//App.js
<div className="App">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function () { //이벤트 설정
            this.setState({ mode: 'welcome' }); //state변경 
          }.bind(this)}
        >
        </Subject>

//Subject.js
 <header>
        <h1><a href="/" onClick={function (e) {
          e.preventDefault(); //이벤트 생성 막기 
          this.props.onChangePage(); // 함수호출
        }.bind(this)}>{this.props.title}</a></h1>
        {this.props.sub}
      </header>