[생활코딩] React 스터디 #3 State

1. Props와 State의 차이점

 

Props

- 컴포넌트는 부모 컴포넌트로부터 props를 상속받고 수정이 불가능하다.

 

State

- 컴포넌트 내부에서 정의되므로 수정이 가능하고 외부에 공개하지 않는다.

 

2. state 사용법

 

constructor(props){
    super(props); {/*state 값 초기화*/}
    this.state={
      subject:{title:"WEB", sub:"World Wide Web!"},
    }
  }

<Subject 
    title={this.state.subject.title} 
    sub={this.state.subject.sub}>
</Subject>

render 함수 안의 Subject 태그 안에 title과 sub값을 이렇게 this.state를 사용하여 가져올 수 있게 된다.

 

3. key

 

key를 사용한다면 같은 코드를 여러번 작성하는 것을 막을 수 있다. 아래 contents에 들어가는 부분이 key값을 설정한 부분이다.

import React, {Component} from 'react';
import TOC from './components/TOC';
import Subject from './components/Subject';
import Content from './components/Content';
import './App.css';
 
class App extends Component {
  constructor(props){
    super(props); {/*state 값 초기화*/}
    this.state={
      subject:{title:"WEB", sub:"World Wide Web!"},
      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'},
      ]
    }
  }
  render(){
  return (
    <div className="App">
      <Subject 
        title={this.state.subject.title} 
        sub={this.state.subject.sub}>
      </Subject>
      <TOC data={this.state.contents}></TOC>
      <Content></Content>
    </div>
  );
  }
}
 
export default App;
 
 

<App Component>

import React, {Component} from 'react';
class TOC extends Component {
    render(){
      var lists=[];
      var data=this.props.data;
      var i=0;
      while(i<data.length){
        lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
        i=i+1;
      }
    return (
      <nav>
        <ul>
          {lists}
        </ul> 
      </nav>
    );
    }
  }
  export default TOC;

<TOC Component>

 

4. render 함수

render 함수는 html이 어떤 페이지를 그릴 것인가를 결정하는 함수이다. 따라서 state나 props가 바뀌면 화면이 다시 그려진다! 따라서 조건에 따라 어떤 내용이 render이 될 것인지 결정할 수 있다.

 

constructor(props){
    super(props); {/*state 값 초기화*/}
    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 for information'},
        {id:2, title: 'CSS', desc:'CSS is for design'},
        {id:3, title: 'JavaScript', desc:'JavaScript is for interactive'},
      ]
    }
  }

constructor 함수 안에 mode를 welcome으로 설정하고, welcome일 때의 title과 desc값을 설정해준다.

 

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;
    }
  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>
  );
  }

그리고 render함수에서 return문 전에 mode가 welcome인지 read인지 판별해서 화면에 나타나는 title과 desc를 다르게 할 수 있다.

만약 mode가 read였다면 HTML과 그에 해당하는 desc값이 나타났을 것이다.