리액트 기초 : state

state를 사용하면 porps 되는 정보를 은닉화 할 수 있다.

1) state vs props

props는 사용자가 컴포넌트를 사용하는 입장

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

 

2) 사용

import './App.css';
import { Component } from 'react';
import Subject from './Subject';
import Toc from './Toc';
import Content from './Content';

class App extends Component {

  constructor(props){
    super(props);
    this.state={
      subject:{title:"WEB",sub:'World'}
    }
  }

  render(){
    return (
      <div className="App">
        <Subject title = {this.state.subject.title} sub={this.state.subject.sub}/>
        <Toc/>
        <Content/>
      </div>
    );
  }
}

export default App;

생성자에서 state에 subject 내부에 title과 sub를 선언하고,

이를 Subject 컴포넌트에 전달한다.

 

state를 사용하면 사용자는 subject가 있는지 없는지 알 수 없게 (은닉화) 한다.

 

 

+) list 형태의 데이터도 간단하게 출력할 수 있다.

 

App.js

import './App.css';
import { Component } from 'react';
import Subject from './Subject';
import Toc from './Toc';
import Content from './Content';

class App extends Component {

  constructor(props){
    super(props);
    this.state={
      subject:{title:"WEB",sub:'World'},
      content:[
        {id:1, title : 'HTML', desc:'HTML is for infomation'},
        {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}/>
        <Toc data={this.state.content}/>
        <Content/>
      </div>
    );
  }
}

export default App;

 

Toc.js

import { Component } from 'react';

class Toc extends Component {
  render(){
    let lists=[];
    const data = this.props.data;
    let i = 0;
    while(i<data.length){
        lists.push(
            <li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a> </li>
        )
        i++;
    }


    return (
      <nav>
          <ul>
              {lists}
          </ul>
      </nav>
    );
  }
}

export default Toc;