[생활코딩 React] 3. state

① State 소개

  ⑴ props vs state

    - props : 사용자가 component를 사용하는 입장에서 중요

    - state: props의 값에 따라서 내부의 구현에 필요한 데이터

    - 사용하는 쪽과 구현하는 쪽을 철저하게 격리시켜서 양쪽의 편의성을 각자 도모하는 것이 중요함

② State 사용

  ⑴ State 사용

//App.js

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

class App extends Component {
  constructor(props){ //초기화 담당
    super(props);
    this.state = {
      subject:{title:'WEB', sub: 'World Wide Web!'}
    }
  }
  render(){
    return (
      <div className="App">
        <Subject title = {this.state.subject.title} 
        sub = {this.state.subject.sub}></Subject>
      </div>
    );
  }
}

export default App;

③ key

  ⑴ key 사용하기

//App.js

import React, { Component } from 'react';
import './App.css';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";

class App extends Component {
  constructor(props){ //초기화 담당
    super(props);
    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 title = "HTML" desc = "      HTML is HyperText Markup Launguage."></Content>
      </div>
    );
  }
}

export default App;

//TOC.js

import React, { Component } from 'react';

class TOC extends Component {
    render(){
      var lists = [];
      var data = this.props.data
      var i = 0;
      while(i < data.length){
      //key부분을 작성하지 않을 경우 error 발생 가능
        lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
        i = i+1;
      }
      return (
        <nav>
          <ul>
              <li><a href="1.html">HTML</a></li>
              <li><a href="2.html">CSS</a></li>
              <li><a href="3.html">JavaScript</a></li>
          </ul>
        </nav>
      );
    }
  }

  export default TOC;

 

출처: https://opentutorials.org/module/4058/24738