생활코딩 react (19.3. create 구현 - mode 전환 기능)

# React-19.3. create 구현 -  mode 전환 기능

 

1. create 클릭시 Content 영역 변경

1.1 조회시 기본 화면 : 읽기(read) 모드에 해당하는 Content 화면(HTML, CSS, JavaScript..) 표시

 > 진행을 위해 Content > ReadContent 로 변경 (초기에 작성한 Article 컴포넌트를 Content로 진행함)

: app.js - import 구문 (Article.js에는 정의하지 않은 export 설정)
import ReadContent from './components/ReadContent';

: app.js - render() Article 구분 
<ReadContent title={_title} desc={_desc}></ReadContent>

: ReadContent.js - Article.js(Content.js) 파일명 및 컴포넌트 구조 변경
import React, { Component } from 'react';

export class ReadContent extends Component {
  render() {
    // this.props.title = 'hi ';
    console.log("ReadContent render");
    return (
      <article>
        <h2>HTML</h2>
        {this.props.desc}
      </article>
    );
  }
}

export default ReadContent;

1.2 create 클릭시 Create 화면으로 변경

 - CreateContent 컴포넌트 추가 (이전작업으로 create 클릭 시 mode가 create로 변경되는 상태)

 > mode 변경에 따라 ReadContent 를 CtreatContent 로 변경 

1.2.1 app.js에서 ReadContent 로  return 하던 구문을 동적으로 상황(create)에 맞게 표시하기 위해

  _article 변수를 추가하여 ReadContent 표시구문을 적용

: app.js - return에서 ReadContent 구문 동적구성
{_article}

1.2.2 추출된 _article 변수는 render 처리를 위한 변수로 선언하고, 

 mode 에 따른 표시정보를 구성하는 로직에 ReadContent 구문을 적용

: app.js - _article 변수 선언(_article 추가)
var _title, _desc, _article = null;

: app.js - render() 구성시 기존 ReadContent 적용 로직
if(this.state.mode === 'welcome'){
  ...
  _article = <ReadContent title={_title} desc={_desc}></ReadContent>
}else if(this.state.mode === 'read'){
  ...
  _article = <ReadContent title={_title} desc={_desc}></ReadContent>
}

1.2.3 변경사항 확인

 - 기능의 변화 없이 _article로 추출한 ReadContent 정상표시여부 확인

1.2.4 mode 값이 create 로 변경될 경우 _article 영역에 CreateContent 표시

 - import에 CreateContent 추가

 - state.mode 가 create 인 경우 _article 영역에 CreateContent 표시

: app.js - import 구문추가 (CreateContent)
import CreateContent from './components/CreateContent';

: app.js - render()의 mode 별 처리로직에 CreateContent 표시로직 추가

if(this.state.mode === 'welcome'){
  ...
  _article = <ReadContent title={_title} desc={_desc}></ReadContent>
}else if(this.state.mode === 'read'){
  ...
  _article = <ReadContent title={_title} desc={_desc}></ReadContent>  
}else if(this.state.mode === 'create'){
  _article = <CreateContent></CreateContent>
}

 

 

* 다음 기능

 - CreateContent의 form 영역 구성