컴퓨터/react

React egoing

풍경소리^^ 2023. 4. 20. 12:23

React - 4. npm을 이용해서 create react app 설치

https://www.youtube.com/watch?v=nvRlr_qPfBc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=4

npm -v

npm install -g create-react-app

create-react-app -v

React - 5. create react app을 이용해서 개발환경구축

https://www.youtube.com/watch?v=C9l-dQTeW7k&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=5

react-app폴더를 먼저 만들고

그 폴더 안에서

cd react-app

create-react-app . 마침표 주의

React - 6. 샘플 웹앱 실행

https://www.youtube.com/watch?v=O58tOX0CtoY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=6

npm run start

React - 7. JS 코딩하는 법

https://www.youtube.com/watch?v=LEPiRfPD9Uw&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=7

public-index.html--------------------

<div id="root"></div>

src-index.js--------------------

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src-App.js--------------------함수형 컴포넌트

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

vscode에서

Reactjs code snippets 설치

클래스형으로 변경해서 강의 진행

rcc 탭 입력 (함수형 컴포넌트 생성 - rsc)

src-App.js--------------------클래스형 컴포넌트

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className='App'>
        
      </div>
    );
  }
}

export default App;

컴포넌트 - 사용자 정의 태그

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className='App'>
        Hello, React!!
      </div>
    );
  }
}

export default App;

React - 8. CSS 코딩하는 법

https://www.youtube.com/watch?v=FbNvDu-XTVg&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=8

src-index.js--------------------

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

css 수정하려면

src-index.css 내용지우기

src-App.css 내용지우기

React - 9. 배포하는 법

https://www.youtube.com/watch?v=E_-ua6uCQOU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=9

배포시

npm run start 가 아니라

npm run build

하면

build폴더가 생성된다

npm install -g server

npx server -s build 위에서 생성된 폴더

React - 10. 리액트가 없다면

https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10

public-pure.html--------------------

<html>
  <body>
    <header>
      <h1>WEB</h1>
      world wide web!
    </header>

    <nav>
      <!-- ul>li*3>a[href=$.html] -->
      <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ul>
    </nav>

    <article>
      <h2>HTML</h2>
      HTML is ...
    </article>
  </body>
</html>

React - 11.1. 컴포넌트 만들기 1

https://www.youtube.com/watch?v=wzii1e_QWgc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=11

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render(){
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Subject></Subject>
      </div>
    );
  }
}

export default App;

React - 11.2. 컴포넌트 만들기 2

https://www.youtube.com/watch?v=J3WQKH35f0M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=12

TOC table of contents

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render(){
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class TOC extends Component {
  render(){
    return(
      <nav>
        {/* ul>li*3>a[href=$.html] */}
        <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render(){
    return(
      <article>
        <h2>HTML</h2>
        HTML is ...
      </article>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

React - 12. props

https://www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render(){
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class TOC extends Component {
  render(){
    return(
      <nav>
        {/* ul>li*3>a[href=$.html] */}
        <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is ..."></Content>
      </div>
    );
  }
}

export default App;

React - 13. React Developer Tools

https://www.youtube.com/watch?v=FWVnIe_9-1w&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=14

Chrome-React Developer Tools

React - 14. Component 파일로 분리하기

https://www.youtube.com/watch?v=8hGqznPGVc0&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=15

src-components-TOC.js--------------------

import React, { Component } from "react";

class TOC extends Component {
  render(){
    return(
      <nav>
        {/* ul>li*3>a[href=$.html] */}
        <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

export default TOC;

src-components-Content.js--------------------

import React, { Component } from 'react';

class Content extends Component {
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    )
  }
}

export default Content;

src-components-Subject.js--------------------

import React, { Component } from 'react';

class Content extends Component {
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    )
  }
}

export default Content;

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is ..."></Content>
      </div>
    );
  }
}

export default App;

React - 15.1. State 소개

https://www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16

props가 사용자의 도구라면

state는 사용자가 알면 안되는 것을 다룰 때 컴포넌트 내부적으로 사용하는 것들

React - 15.2. State 사용

https://www.youtube.com/watch?v=e2c1EUcW7oo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=17

props의 값을 state로 만들고

state의 값을 컴포넌트의 props로 전달하는 방법으로 코드개선

state의 값을 초기화 시킨다

어떤 컴포넌트가 실행될 때 render라고 하는 이 함수보다

먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는

constructor 안에다가 코드를 작성한다.

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      subject:{title: 'WEB', sub: 'World Wide Web!'}
    }
  }
  render() {
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is ..."></Content>
      </div>
    );
  }
}

export default App;

상위 컴포넌트의 state값을

하위 컴포넌트의 props의 값으로 전달하는 것

React - 15.3. key

https://www.youtube.com/watch?v=sAFNZuzFEPo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=18

만약 state에 여러개의 값을 다룬다면

TOC 글 목록

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      subject:{title: 'WEB', sub: 'World Wide Web!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title="HTML" desc="HTML is ..."></Content>
      </div>
    );
  }
}

export default App;

src-components-TOC.js--------------------

import React, { Component } from "react";

class TOC extends Component {
  render(){
    let lists = [];
    const data = this.props.data;
    let i = 0;
    while(i<data.length){
      lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
      i = i + 1;
    }
    return(
      <nav>
        {/* ul>li*3>a[href=$.html] */}
        <ul>
          {lists}
        </ul>
      </nav>
    );
  }
}

export default TOC;

React - 16.1. 이벤트 state props 그리고 render 함수

https://www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=19

리액트에서는 props의 값이나 state의 값이 바뀌면

해당 컴포넌트의 render함수가 호출되도록 약속 되어있다.

props의 값이나 state의 값이 바뀌면 화면이 다시 그려진다는 뜻

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

React - 16.2. 이벤트 설치

https://www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className='App'>
        {/* <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}>
        </Subject> */}
        <header>
          <h1><a href="/" onClick={function (e) {
            // alert('hi');
            console.log(e);
            e.preventDefault(); // 기본적인 동작을 막는 것-a태그의 기본적인 동작을 막는다
            // debugger;
          }}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

React - 16.3. 이벤트에서 state 변경하기

https://www.youtube.com/watch?v=h7GdhY_m8nM&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=21

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className='App'>
        {/* <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}>
        </Subject> */}
        <header>
          <h1><a href="/" onClick={function (e) {
            // alert('hi');
            console.log(e);
            e.preventDefault(); // 기본적인 동작을 막는 것-a태그의 기본적인 동작을 막는다
            // debugger;
            this.setState({
              mode: 'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

React - 16.4. 이벤트 bind 함수 이해하기

https://www.youtube.com/watch?v=o7Id7GMcuFo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=22

npm run start

React - 16.5. 이벤트 setState 함수 이해하기

https://www.youtube.com/watch?v=PTRpJNMiMdA&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=23

React - 17.1. 컴포넌트 이벤트 만들기

https://www.youtube.com/watch?v=NFR7vDArVlY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=24

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    console.log('render', this)
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){ // 우리가 만든 이벤트
            alert('hihihi');
          }.bind(this)}
        >
        </Subject>
        {/* <header>
          <h1><a href="/" onClick={function (e) {
            // alert('hi');
            console.log(e);
            e.preventDefault(); // 기본적인 동작을 막는 것-a태그의 기본적인 동작을 막는다
            // debugger;
            this.setState({  // 함수의 형태로
              mode: 'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header> */}

        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

src-components-Subject.js--------------------

import React, { Component } from 'react';

class Subject extends Component {
  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;

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    console.log('render', this)
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){ // 우리가 만든 이벤트
            this.setState({mode:'welcome'});
          }.bind(this)}
        >
        </Subject>
        {/* <header>
          <h1><a href="/" onClick={function (e) {
            // alert('hi');
            console.log(e);
            e.preventDefault(); // 기본적인 동작을 막는 것-a태그의 기본적인 동작을 막는다
            // debugger;
            this.setState({  // 함수의 형태로
              mode: 'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header> */}

        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    console.log('render', this)
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){ // 우리가 만든 이벤트
            this.setState({mode:'welcome'});
          }.bind(this)}
        >
        </Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

React - 17.2. 컴포넌트 이벤트 만들기

https://www.youtube.com/watch?v=hR5H0OFksx8&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=25

src-App.js--------------------

import React, { Component } from 'react';
import './App.css';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';

class App extends Component {
  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 ...'},
        {id:2, title:'CSS', desc:'CSS is ...'},
        {id:3, title:'JavaScript', desc:'JavaScript is ...'}
      ]
    }
  }
  render() {
    let _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[0].title;
      _desc = this.state.contents[0].desc;
    }
    console.log('render', this)
    return (
      <div className='App'>
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){ // 우리가 만든 이벤트
            this.setState({mode:'welcome'});
          }.bind(this)}
        >
        </Subject>
        <TOC 
          onChangePage={function(){
            this.setState({mode:'read'});
            
          }.bind(this)} 
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

src-components-TOC.js--------------------

import React, { Component } from "react";

class TOC extends Component {
  render(){
    let lists = [];
    const data = this.props.data;
    let 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;
    }
    return(
      <nav>
        {/* ul>li*3>a[href=$.html] */}
        <ul>
          {lists}
        </ul>
      </nav>
    );
  }
}

export default TOC;

React - 17.3. 컴포넌트 이벤트 만들기

https://www.youtube.com/watch?v=11mTvRtXx4g&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=26