react state소개 및 사용

참고사이트 

https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

React - YouTube

2020/05/04 - [react/기초] - react 설치, 개발환경구축

2020/05/05 - [react/기초] - react 구조

2020/05/11 - [react/기초] - react 컴포넌트(component) 개념

2020/05/13 - [react/기초] - react 속성(props), react Developer Tools 사용

- state소개

state를 이해하기 위해선 props와 함께 개념을 이해해야 한다. 

휴대폰에 버튼, 화면 등(user interface)이 props라면 내부적인 구현을 위해서 다양한 상태, 매커니즘등을 state라고 가정할 수 있겠다.

props는 사용자가 component를 사용하는 입장에서 중요하고, state는 props의 값에 따라서 내부구현에 필요한 데이터들이 state다.

컴포넌트가 좋은부품이 되기 위해서는 그 컴포넌트를 사용하는 외부에 props와 그 props에 따라서 구현되어지는 내부에 state가 철저히 분리되어 있어야 한다.

즉 사용하는 쪽과 구현하는 쪽이 철저히 격리되어서 양쪽에 편의성을 각자 도모하는것이 핵심이다.

 

- state 사용

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

class App extends Component {
  //state 초기화
  //컴포넌트가 실행될때 constructor이 있다면 제일먼저 실행되어서 초기화를 담당한다.
  constructor(props){
    super(props);
    //subject state값을 만듬
    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>
        <Nav></Nav>
        <Article title="Html" sub="Html is HyperText Markup Language."></Article>
      </div>
    );
  }
}

export default App;

컴포넌트가 실행될때 constructor을 만나면 제일먼저 실행되어서 초기화를 담당한다. 

state 생성은 this.state = {subject: {title:'WEB', sub:'World Wide Web!'}

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

 

- state 더 잘사용해보기

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

class App extends Component {
  //state 초기화
  //컴포넌트가 실행될때 constructor이 있다면 제일먼저 실행되어서 초기화를 담당한다.
  constructor(props){
    super(props);
    //subject 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>
        <Nav data={this.state.contents}></Nav>
        <Article title="Html" sub="Html is HyperText Markup Language."></Article>
      </div>
    );
  }
}

export default App;

 

src>App.js

 

nav영역의 목록데이터를 state로 사용하려면 constructor의 contents: [...] 항목추가

<Nav data={this.state.contents}></Nav>로 위의 state와 연결

import React, { Component } from 'react';

class Nav extends Component {
  render(){
    var lists = [];
    var data = this.props.data; //App.js state contents 값
    var i = 0;
    //while 반복문
    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 Nav;

src>component>Nav.js