[React] Day 4 - state

state와 props의 차이점

Props

component를 사용하는 사용자는 props를 문법적으로 제공받아서  component를 조작할 수 있게 된다.

📌따라서 props는 component 사용자에게 중요한 정보이다.

 

State

📌반대로 state는 사용자가 몰라야하는 내부적으로 사용되는 것들을 모아놓은 것이다.

 

➡️➡️결과적으로 우리가 사용하는 component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props에 따라서 그 컴포넌트를 실제로 구현하는 내부의 state라는 정보가 철저하게 분리되어야 한다.

 

constructor(props){
    super(props);{
      
    }
  }

➡️render() 함수 앞에 나오면서 props의 값을 초기화 해준다. 

 

constructor(props){
    super(props);
    this.state = {
      subject:{title:'WEB', sub:'world wide web!'}
    }
  }

➡️props의 값을 초기화 해줌과 동시에 state를 만들고 값을 지정해준다.

 

title={this.state.subject.title}

➡️숨겨진 state 값을 출력해주기

 

state를 list로 만드는 방법

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'}
      ]

➡️contents라는 값을 여러개 가지는 state를 만들어준다.

 

var lists = [];
    var data = this.props.data;
    var 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;
    }

📌App.js에서 만들어준 여러 값을 가진 contents라는 state를 TOC.js에서 이용해주는 방법. 

➡️lists를 만들어서 각 state의 값을 push해서 출력해준다. 

 

state -> Key

📢 list안에 있는 요소들마다 key를 정해줘야 한다. 따라서 

key={data[i].id}

이 코드를 넣어줘야한다. 

 

📢📢이러한 방법으로 코드를 작성해주게되면 매번 component 파일에 들어가지 않아도 App.js파일 하나에서 값을 조작해줄 수 있다.

App.js

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

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>
        <Subject title="React" sub="For UI"></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title="WEB" desc="HTML is HyperText Markup Language"></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) {
      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;