state

 

state란?

state는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,

props는 컴포넌트와 전달되는 반면 state는 컴포넌트 안에서 관리된다는 차이가 있다.

state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시키기 위해서이다.

 

state 예시

src/App.js

import React, { Component } from 'react';
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 Language."></Content>
        </div>
    );
  }
}

export default App;

 

src/components/Subject.js

import React, {Component} from 'react';

class Subject extends Component{
    render() {
        return (
            <header>
                <h1>{this.props.title}</h1>
                {this.props.sub}
            </header>
        );
    }
}

export default Subject;

 

src/components/TOC.js

import React, {Component} from 'react';

class TOC extends Component{
    render() {
        let lists = [];
        let 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 = i + 1;
        }

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

export default TOC;

 

src/components/Content.js

import React, {Component} from 'react';

class Content extends Component{
    render() {
        return(
            <article>
                <h2>{this.props.title}</h2>
                {this.props.desc}
            </article>
        )
    }
}

export default Content;

 

 

생활코딩의 React강의를 보고 작성된 글입니다.