React {mode } 변경하기( 이벤트 함수를 위한 준비 )

현재 실습중인 코드이다.

constructor(props){

    super(props);

    this.state = {

      mode:'welcome',

      subject:{title:'WEB', sub:'World Wid Web!'},

      welcome:{title:'Welcome', desc:'Hello, React!!'},

      contents:[

        {id:1, title:'HTML', desc:'HTML is important'},

        {id:2, title:'CSS', desc:'CSS is for design'},

        {id:3, title:'Javascript', desc:'JavaScript is for interactive'}

      ]

      }

    }

  render() {

    var _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;

    }

 

super(props) 밑에 있는 contents는 App 이라는 컴포넌트 안 TOC 컴포넌트에 data = this.state.contents 로

직접 넣어주었다. 

 

그리고 mode 의 'welcome' 을 추가해 주었다. 

이제 기본값의 mode 는 welcome 이 될 것이다. 

 

이제 render 부분을 뜯어보겠다.

일단 _title 과 _desc 를 빈 값으로(null)로 주었다.

 

if문으로 실행을 하는데,

만약 this.state.mode 가 'welcome' 이라면,

_title 은 this.state.welcome.title 이 나오게 될 것이고,

_desc 는 this.state.welcome.desc 가 나와야 할 것이다.

 

만약 아니라면, this.statee.mode 가 read 라면

_title 은 this.state.contents[0].title 이 나와야 하고,

_desc 는 this.state.content[0].desc 가 나와야 한다. 

 

그리고 변경 되어야 할 contents 컴포넌트는

<Content title={_title} desc={_desc}></Content>

값으로 변경해 주었다. 

 

이제 mode 의 따라서 Content 컴포넌트의 내용이 변경되어야 할 것이다.

 

이벤트를 실행 할 준비는 끝났다.

 

다음엔 javascript 의 onclick 과 비슷한 onClick 를 사용해 볼 예정이다. 

 

,

,

,

 

2번째 영상시청이다 보니 조금씩 다르게 보이기 시작한다. 처음엔 이해를 못해서 실습보단

영상시청과 이해를 위주로 진행했으나 이제는 실습을 따라하면서 조금씩 이해가 더해져 간다. 

React 도 얼른 연습해서 실무에 나갈 준비를 빨리 끝마치고 싶다.