220803 - 리액트 - update(기존 목록 내용 변경), delete(선택 목록 삭제)

update

• render() 내부 코드 메소드로 분리

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent submitValue={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        // this.state.contents.push({ 
        //   id:this.max_content_id+1,
        //   title:_title,
        //   desc:_desc
        // });
        /*let _contents=this.state.contents.concat({
          id:this.max_content_id+1,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents
        });*/
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _article=<UpdateContent onSubmit={(_title,_desc)=>{

      }}></UpdateContent>
    }
    return _article;
  }//getContent

  render(){ 

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{this.setState({
            mode:_mode
        });}}></Control>
        {/* {_article} */}
        {/* <ReadContent title={_title} desc={_desc}></ReadContent> */}
        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

• UpdateContent

import { Component } from "react";

class UpdateContent extends Component{
    render(){
        console.log('UpdateContent 렌더링 됨'); //렌더링=호출되어 브라우저에 불려옴
        return(
            <article>
                <h2>수정하기</h2>
                <form action='/update_process' method="post" 
                onSubmit={(event)=>{
                    event.preventDefault();
                    this.props.submitValue(event.target.title.value, event.target.desc.value);
                }}>
                    <p>
                        <label>목차 이름</label>
                        <input type='text' name='title' placeholder="목차 이름 입력"></input>
                    </p>
                    <p>
                        <label>세부 설명</label>
                        <textarea name='desc' placeholder="세부 설명 입력"></textarea>
                    </p>
                    <p>
                        <input type='submit' value='수정'></input>
                    </p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

 

 

• 연결한 데이터 표시

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent submitValue={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _content=this.getReadContent();
      _article=<UpdateContent data={_content} onSubmit={(_title,_desc)=>{
      }}></UpdateContent>
    }
    return _article;
  }//getContent

  render(){ //render: export 도움

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{this.setState({
            mode:_mode
        });}}></Control>
        {/* {_article} */}
        {/* <ReadContent title={_title} desc={_desc}></ReadContent> */}
        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

• UpdateContent

import { Component } from "react";

class UpdateContent extends Component{

    constructor(props){
        super(props);
        this.state={
            id:this.props.data.id,
            title:this.props.data.title,
            desc:this.props.data.desc
        }
    }

    render(){
        console.log(this.props.data);
        console.log('UpdateContent 렌더링 됨'); //렌더링=호출되어 브라우저에 불려옴
        return(
            <article>
                <h2>수정하기</h2>
                <form action='/update_process' method="post" 
                onSubmit={(event)=>{
                    event.preventDefault();
                    this.props.onSubmit(event.target.title.value, event.target.desc.value);
                }}>
                    <p>
                        <label>목차 이름</label>
                        <input type='text' name='title' placeholder="목차 이름 입력" 
                        value={this.state.title}
                        onChange={(event)=>{
                            console.log(event.target);
                            this.setState({
                                title:event.target.value
                            });
                        }}></input>
                    </p>
                    <p>
                        <label>세부 설명</label>
                        <textarea rows="5" name='desc' placeholder="세부 설명 입력" 
                        value={this.state.desc}
                        onChange={(event)=>{
                            console.log(event.target);
                            this.setState({
                                desc:event.target.value
                            });
                        }}></textarea>
                    </p>
                    <p>
                        <input type='submit' value='수정'></input>
                    </p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

 

 

=> 함수 축약

 

import { Component } from "react";

class UpdateContent extends Component{

    constructor(props){
        super(props);
        this.state={
            id:this.props.data.id,
            title:this.props.data.title,
            desc:this.props.data.desc
        }
        this.inputFormHandler=this.inputFormHandler.bind(this);
        //input~과 this(UpdateContent) 연결
    }

    inputFormHandler(event){
        this.setState({
            [event.target.name]:event.target.value  //input과 textarea 모두 수정
        });
    }

    render(){
        console.log(this.props.data);
        console.log('UpdateContent 렌더링 됨'); //렌더링=호출되어 브라우저에 불려옴
        return(
            <article>
                <h2>수정하기</h2>
                <form action='/update_process' method="post" 
                onSubmit={(event)=>{
                    event.preventDefault();
                    this.props.onSubmit(this.target.title.value, this.target.desc.value);
                }}>
                    <p>
                        <label>목차 이름</label>
                        <input type='text' name='title' placeholder="목차 이름 입력" 
                        value={this.state.title}
                        onChange={this.inputFormHandler}></input>
                    </p>
                    <p>
                        <label>세부 설명</label>
                        <textarea rows="5" name='desc' placeholder="세부 설명 입력" 
                        value={this.state.desc}
                        onChange={this.inputFormHandler}></textarea>
                    </p>
                    <p>
                        <input type='submit' value='수정'></input>
                    </p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

 

 

 

• id 개별 연결

• UpdateContent

import { Component } from "react";

class UpdateContent extends Component{

    constructor(props){
        super(props);
        this.state={
            id:this.props.data.id,
            title:this.props.data.title,
            desc:this.props.data.desc
        }
        this.inputFormHandler=this.inputFormHandler.bind(this);
        //input~과 this(UpdateContent) 연결
    }

    inputFormHandler(event){
        this.setState({
            [event.target.name]:event.target.value
        });
    }

    render(){
        console.log(this.props.data);
        console.log('UpdateContent 렌더링 됨'); //렌더링=호출되어 브라우저에 불려옴
        return(
            <article>
                <h2>수정하기</h2>
                <form action='/update_process' method="post" 
                onSubmit={(event)=>{
                    event.preventDefault();
                    this.props.onSubmit(
                        this.state.id, 
                        this.state.title,
                        this.state.desc
                    );
                }}>
                    <input type="hidden" name="id" value={this.state.id}></input>
                    <p>
                        <label>목차 이름</label>
                        <input type='text' name='title' placeholder="목차 이름 입력" 
                        value={this.state.title}
                        onChange={this.inputFormHandler}></input>
                    </p>
                    <p>
                        <label>세부 설명</label>
                        <textarea rows="5" name='desc' placeholder="세부 설명 입력" 
                        value={this.state.desc}
                        onChange={this.inputFormHandler}></textarea>
                    </p>
                    <p>
                        <input type='submit' value='수정'></input>
                    </p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

 

 

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent submitValue={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _content=this.getReadContent();
      _article=<UpdateContent data={_content} 
      onSubmit={(_id, _title,_desc)=>{
        let _contents=Array.from(this.state.contents);
        let i=0;
        while(i<_contents.length){
          if(_contents[i].id===_id){
            _contents[i]={id:_id, title:_title, desc:_desc}
          }
          break;
        }
      }}></UpdateContent>
    }
    return _article;
  }//getContent

  render(){ //render: export 도움

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{this.setState({
            mode:_mode
        });}}></Control>

        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

• setState

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent submitValue={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents,
          mode:'read',
          selected_content_id:this.max_content_id
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _content=this.getReadContent();
      _article=<UpdateContent data={_content}   
      onSubmit={(_id, _title,_desc)=>{
        let _contents=Array.from(this.state.contents);  
        let i=0;
        while(i<_contents.length){
          if(_contents[i].id===_id){ 
            _contents[i]={id:_id, title:_title, desc:_desc};
            break;
          }
          i++;
        }
        this.setState({
          contents:_contents,
          mode:'read'
        });
      }}></UpdateContent>
    }//else if
    return _article;
  }//getContent

  render(){ //render: export 도움

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({ 
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{this.setState({
            mode:_mode
        });}}></Control>

        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

 

• 수정 버튼 클릭 - 목록 반영 기능 구현

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent onSubmit={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents,
          mode:'read',
          selected_content_id:this.max_content_id
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _content=this.getReadContent();
      _article=<UpdateContent data={_content} 
      onSubmit={(_id, _title,_desc)=>{
        let _contents=Array.from(this.state.contents);
        let i=0;
        while(i<_contents.length){
          if(_contents[i].id===_id){
            _contents[i]={id:_id, title:_title, desc:_desc};
            break;
          }
          i++;
        }
        this.setState({
          contents:_contents,
          mode:'read'
        });
      }}></UpdateContent>
    }//else if
    return _article;
  }//getContent

  render(){ //render: export 도움

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{this.setState({
            mode:_mode
        });}}></Control>
        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

• UpdateContent

import { Component } from "react";

class UpdateContent extends Component{

    constructor(props){
        super(props);
        this.state={
            id:this.props.data.id,
            title:this.props.data.title,
            desc:this.props.data.desc
        }
        this.inputFormHandler=this.inputFormHandler.bind(this);
        //input~과 this(UpdateContent) 연결
    }

    inputFormHandler(event){
        this.setState({
            [event.target.name]:event.target.value
        });
    }

    render(){
        console.log(this.props.data);
        console.log('UpdateContent 렌더링 됨'); //렌더링=호출되어 브라우저에 불려옴
        return(
            <article>
                <h2>수정하기</h2>
                <form action='/update_process' method="post" 
                onSubmit={(event)=>{
                    event.preventDefault();
                    this.props.onSubmit(
                        this.state.id, 
                        this.state.title,
                        this.state.desc
                    );
                }}>
                    <input type="hidden" name="id" value={this.state.id}></input>
                    <p>
                        <label>목차 이름</label>
                        <input type='text' name='title' placeholder="목차 이름 입력" 
                        value={this.state.title}
                        onChange={this.inputFormHandler}></input> {/*값 바뀔 때*/}
                    </p>
                    <p>
                        <label>세부 설명</label>
                        <textarea rows="5" name='desc' placeholder="세부 설명 입력" 
                        value={this.state.desc}
                        onChange={this.inputFormHandler}></textarea>
                    </p>
                    <p>
                        <input type='submit' value='수정'></input>
                    </p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

 

 

 

delete

• 기능 구현

• App

import { Component } from 'react';
import './App.css';
import Subject from '../src/Components/Subject';
import TOC from '../src/Components/TOC'
import ReadContent from './Components/ReadContent'
import Control from '../src/Components/Control'
import CreateContent  from '../src/Components/CreateContent';
import UpdateContent from './Components/UpdateContent';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id=3;
    this.state={
      mode:'read',
      selected_content_id:1,
      subject:{title:'웹카페',sub:'웹에 대해 알아봅시다'},
      welcome:{title:'환영합니다',desc:'웹카페 홈페이지 방문을 환영합니다'},
      contents:[ //배열 객체
      {id:1, title:'HTML5에 대해', desc:'홈페이지의 뼈대를 말한다'},
      {id:2, title:'CSS3의 모든 것', desc:'홈페이지를 꾸미고 레이아웃을 설정한다'},
      {id:3, title:'Javascript란', desc:'정적인 홈페이지를 동적으로 만든다'}
      ]
    }
  }

  //내용 read 메소드
  getReadContent(){ 
    let i=0;
    while(i<this.state.contents.length){
      let data=this.state.contents[i];
      if (data.id===this.state.selected_content_id){
        return data;
      }
      i++;
    }
  }

  //내용 get 메소드
  getContent(){
    let _title, _desc, _article=null, _content; //컴포넌트 담을 변수 앞에 _ 입력할 것
    if (this.state.mode==='welcome'){ 
      _title=this.state.welcome.title;
      _desc=this.state.welcome.desc;
      _article=<ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode==='read') {
      _content=this.getReadContent();
      _article=<ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create'){
      _article=<CreateContent onSubmit={(_title,_desc)=>{ //위 같은 이름 변수와 다름 //외부에서 받는 매개변수임
        this.max_content_id=this.max_content_id+1;
        let _contents=Array.from(this.state.contents); //복제
          _contents.push({
          id:this.max_content_id,
          title:_title,
          desc:_desc
        });
        this.setState({
          contents:_contents,
          mode:'read',
          selected_content_id:this.max_content_id
        });
      }}></CreateContent>
    } else if(this.state.mode==='update'){
      _content=this.getReadContent();
      _article=<UpdateContent data={_content} 
      onSubmit={(_id, _title,_desc)=>{
        let _contents=Array.from(this.state.contents);
        let i=0;
        while(i<_contents.length){
          if(_contents[i].id===_id){
            _contents[i]={id:_id, title:_title, desc:_desc};
            break;
          }
          i++;
        }
        this.setState({
          contents:_contents,
          mode:'read'
        });
      }}></UpdateContent>
    }//else if
    return _article;
  }//getContent

  render(){ //render: export 도움

    console.log('App 컴포넌트 렌더링됨');

    return ( 
      <div className='App'> 
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          //alert('클릭해서 속성 호출')
          this.setState({mode:'welcome'});
        }.bind(this)}></Subject> 
        <TOC data={this.state.contents} 
        onChangePage={id=>{
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }}></TOC> 
        <Control onChangeMode={_mode=>{
          if(_mode==='delete'){   
            if(window.confirm('정말로 삭제할까요?')){
              let _contents=Array.from(this.state.contents);
              let i=0;
              while(i<_contents.length){
                if(_contents[i].id===this.state.selected_content_id){
                  _contents.splice(i,1); //i번째에서 하나 삭제
                  break;
                }
                i++;
              }
              this.setState({
                mode:'welcome',
                contents:_contents
              });
              alert('삭제 완료');
            }
          }
          else{
            this.setState({
              mode:_mode
            });
          }
          this.setState({mode:_mode});
        }}></Control>

        {this.getContent()}
      </div>
    );
  }
}

export default App;

 

 

 

클래스형 / 함수형 컴포넌트

새 폴더에서 프로젝트 시작 => cmd: npx create-react-app .

 

16.8 버전
hook 도입 => function 으로 컴포넌트 세팅 가능
=> 함수 스타일 컴포넌트 (cf. 클래스 스타일 컴포넌트)

class : state=>변경 / lifecycle => 처리 가능
function : hook 이용해 state 처리

 

 

• 기본 형태

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

//함수형 컴포넌트
function FunCom(props){
  return(
    <div className='container'>
      <h2>함수 컴포넌트</h2>
      <p>숫자 : {props.initNum}</p>  {/*단순 매개변수*/}
    </div>
  );
}

//클래스형 컴포넌트
class ClaCom extends Component{
  render(){
    return(
      <div className='container'>
        <h2>클래스 컴포넌트</h2>
        <p>숫자 : {this.props.initNum}</p> {/* 명령문 => ClaCom의 속성 중 initNum 가져옴*/}
      </div>
    );
  }
}

function App() {
  return (
    <div className="container">
      <h1>함수형 컴포넌트 vs 클래스형 컴포넌트</h1>
      <FunCom initNum={7}></FunCom>
      <ClaCom initNum={7}></ClaCom>
    </div>
  );
}

export default App;

 

 

• state 변경

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

//함수형 컴포넌트
function FunCom(props){
  // let funcState=useState(props.initNum); //hook => 배열 형태
  // let number=funcState[0]; //속성에서 전달받은 값
  // let setNumber=funcState[1]; //함수 (새로 전달할 값)
  let [number, setNumber] = useState(props.initNum);
  //console.log('함수 state',funcState);
  return(
    <div className='container'>
      <h2>함수 컴포넌트</h2>
      <input type='button' value='random' onClick={()=>{
        setNumber(Math.floor(Math.random()*100)+1);
      }}></input>
      <p>숫자 : {number}</p> {/*단순 매개변수*/}
    </div>
  );
}

//클래스형 컴포넌트
class ClaCom extends Component{
  constructor(props){
    super(props);
    this.state={
      number: this.props.initNum //7
    }
  }

  render(){
    return(
      <div className='container'>
        <h2>클래스 컴포넌트</h2>
        <input type='button' value='random' onClick={()=>{
          this.setState({
            number:Math.floor(Math.random()*100)+1
          });
        }}/>
        <p>숫자 : {this.state.number}</p>
      </div>
    );
  }
}

function App() {
  return (
    <div className="container">
      <h1>함수형 컴포넌트 vs 클래스형 컴포넌트</h1>
      <FunCom initNum={7}></FunCom>
      <ClaCom initNum={7}></ClaCom>
    </div>
  );
}

export default App;

 

 

• 또다른 state 변경

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

//함수형 컴포넌트
function FunCom(props){
  let [number, setNumber] = useState(props.initNum); 
  let [date, setDate]=useState(new Date().toString());

  return(
    <div className='container'>
      <h2>함수 컴포넌트</h2>
      <input type='button' value='random' onClick={()=>{
        setNumber(Math.floor(Math.random()*100)+1);
      }}></input>
      <input type='button' value='date' onClick={()=>{
        setDate(new Date().toString());
      }}></input>
      <p>숫자 : {number}</p> {/*단순 매개변수*/}
      <p>날짜 : {date}</p>
    </div>
  );
}

//클래스형 컴포넌트
class ClaCom extends Component{
  constructor(props){
    super(props);
    this.state={
      number: this.props.initNum, //7
      date: new Date().toString()
    }
  }

  render(){
    return(
      <div className='container'>
        <h2>클래스 컴포넌트</h2>
        <input type='button' value='random' onClick={()=>{
          this.setState({
            number:Math.floor(Math.random()*100)+1
          });
        }}/>
        <input type='button' value='date' onClick={()=>{
          this.setState({
            date:new Date().toString()
          });
        }}></input>
        <p>숫자 : {this.state.number}</p> {/*클래스의 속성 중 initNum 가져옴*/}
        <p>날짜 : {this.state.date}</p>
      </div>
    );
  }
}

function App() {
  return (
    <div className="container">
      <h1>함수형 컴포넌트 vs 클래스형 컴포넌트</h1>
      <FunCom initNum={7}></FunCom>
      <ClaCom initNum={7}></ClaCom>
    </div>
  );
}

export default App;