[React] 마무리 정리 + 코드모음

생활코딩 : 리액트 편을 보고 작성된 게시글 입니다.

 

 

여태까지 게시글 코드 총 정리

App.js

import React, { Component } from 'react';
import './App.css';
import TOC from "./components/TOC";
import Subject from "./components/Subject"
import ReadContent from './components/ReadContent';
import Control from './components/Control';
import CreateContent from './components/CreateContent';
import UpdateContent from './components/UpdateContent';


class App extends Component {

  constructor(props){ 
    super(props); 
    this.max_content_id=3; 
    this.state ={
      mode : 'welcome',
      subject : {title:"WEB", sub:"world wide web!"},
      selected_content_id : 2,
      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'}
      ]
    }

  }


getReadContent(){

  var i = 0;
  while(i<this.state.contents.length){
      var data = this.state.contents[i];
      if(data.id === this.state.selected_content_id){
        return data;
      }
    i=i+1;
  }

}


getContent(){

  var _title, _desc, _article = null;

  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')
  {
    var _content = this.getReadContent();
    _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent> 
  }
  else if(this.state.mode ==='create')
  {
    _article = <CreateContent onSubmit={function(_title,_desc){
      this.max_content_id = this.max_content_id+1;
      var _contents = this.state.contents.concat(
        {id:this.max_content_id, title:_title, desc:_desc}
        );
      this.setState(
        {
          contents : _contents,
          mode : 'read',
          selected_content_id :this.max_content_id
        }
      );
    }.bind(this)}></CreateContent> 
  }
  else if(this.state.mode ==='update')
  {
    _content = this.getReadContent();
    _article = <UpdateContent data={_content} onSubmit={function(_id,_title,_desc){
      var _contents = Array.from(this.state.contents);

      var i = 0;
      while(i<_contents.length){
        if(_contents[i].id === _id){
          _contents[i] = {id:_id, title:_title, desc:_desc};
          break;
        }
        i = i + 1;
      }

      this.setState(
        {
          contents : _contents,
          mode : 'read'
        }
      );
    }.bind(this)}></UpdateContent> 
  }

  return _article;
}


render(){


    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(id){

            this.setState({
              mode : 'read',
              selected_content_id : Number(id)
            });


        }.bind(this)}
        data={this.state.contents}></TOC>

        <Control onChangeMode={function(_mode){
          if(_mode === 'delete'){
            if(window.confirm("정말 삭제하실 건가요?")){
              var _contents = Array.from(this.state.contents);
              var i = 0;
              while(i<_contents.length){
                if(_contents[i].id === this.state.selected_content_id){
                   _contents.splice(i,1);
                  break;
                }
              i = i + 1;
            }
            this.setState({
              mode:'welcome',
              contents:_contents
            })
            alert("삭제가 완료되었습니다.");
          }
          }else{
            this.setState({
              mode : _mode
            })
          }

        }.bind(this)}></Control>

        {this.getContent()}

      </div>
      );
  
}
}

export default App;

 

 

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; //외부에서 사용을 허용

 

 

TOC.js

import React, { Component } from 'react';
class TOC extends Component{
  render(){
    var lists = []; //html내의 list를 반복적으로 출력해줄 리스트 
    
    var data = this.props.data;
    //컴포넌트의 속성으로 들어온 data값을 저장해줌 -> 상위 컴포넌트에서 state에 주어진 content배열임 
    
    var i = 0; //반복문을 위한 변수 
    
    
    //<li><a href=?>??</a></li> 형식을 지켜 리스트에 넣어줌 
    while(i< data.length){ //데이터의 길이만큼 반복 
      lists.push(
      <li key={data[i].id}>
        <a 
          href={"/content/"+data[i].id}
          data-id = {data[i].id}
          onClick={ function(id, e){ //원래 있었던 매개변수인 e가 두번째 매개변수로 밀린모습
            e.preventDefault();
            this.props.onChangePage(id);
          }.bind(this, data[i].id)}
          >{data[i].title}</a>
      </li>);
      i = i + 1;
    }

    return(
      <nav>
        <ul>
          {lists} 
        </ul>
      </nav>
    );
  }
}
  
  export default TOC; //외부에서 사용을 허용

 

 

Control.js

import React, { Component } from 'react';

class Control extends Component {
    render(){
      return(
        <ul>
        <li><a href="/create" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('create');
        }.bind(this)}>create</a></li>
        
        <li><a href="/update" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('update');
        }.bind(this)}>update</a></li>

        <li><input onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('delete');
        }.bind(this)} type="button" value="delete"></input></li>
      </ul>

      );
    }
  }


export default Control; //외부에서 사용을 허용

 

 

ReadComponent.js

import React, { Component } from 'react';

class ReadContent extends Component{


    render(){
      return(
        <article>
          <h2>{this.props.title}</h2>
            {this.props.desc}
        </article>
      );
    }
  }


  export default ReadContent; //외부에서 사용을 허용

 

 

CreateComponent.js

import React, { Component } from 'react';

class CreateContent extends Component{


    render(){
      return(
        <article>
          <h2>Create</h2>
          <form action="/create_process" 
          method="post" 
          onSubmit={function(e){
              e.preventDefault();
              this.props.onSubmit(e.target.title.value, e.target.desc.value);
          }.bind(this)}>
                <p><input type="text" name="title" placeholder="title"></input></p>
                <p><textarea name="desc" placeholder="description"></textarea></p>
                <p><input type="submit"></input></p>
          </form>
        </article>
      );
    }
  }


  export default CreateContent; //외부에서 사용을 허용

 

 

 

<추가적인 부분>

 

immutable : 불변의 

너무 자유분방한 값 변경은 난감한 issue를 불러옴 

가끔씩 값을 불변으로 설정해서 관리해 주어야함 -> 지원 라이브러리가 여러개 있음 (immutable js)

 

router 

하나의 URL로 모든 페이지를 다룸 (장점이자 단점) 

-> react router :  url에 따라 적절한 컴포넌트를 사용할 수 있게 해줌

 

create-react-app 

npm run eject : create - react - app 개발환경을 수정할 수 있음

 

redux

컴포넌트가 많아지면 컴포넌트간의 교류가 어려워짐 

중앙에 데이터 저장소를 하나 만들어서 여러 컴포넌트가 교류함 

 

react server side rendering

서버쪽에서 웹을 완성한 후에 클라이언트로 완성된html을 전송하는 것으로 앱을 실행

웹페이지 분석에 친화적 

 

react native

리액트와 같은 방식으로 native app(ios, android)을 만들 수 있음 

 

참고영상

생활코딩

• React - 22. 수업을 마치며

youtu.be/jukwa3_4LdI