🎥 생활코딩 YouTube

1. State 소개

❓ "좋은 부품을 만드는 핵심, 리액트를 다루는 핵심" 
: 사용하는 쪽과 구현하는 쪽을 철저하게 격리시켜서 양쪽의 편의성을 각자 도모하는 것

• props
  : 사용자가 제품을 조작하는 장치, 사용자가 컴포넌트를 사용하는 입장에서 중요한 것
• state
  : 제품을 구현하는데에 있는 내부적 조작장치, props의 값에 따라 내부에 필요한 데이터들

2. State 사용

: 실행 될 때 rendor() 함수보다 먼저 실행시켜서 값이나 함수 자체를 초기화시켜주고 싶은 코드는 다음과 같은 영역에 작성

class App extends Component {
  constructor(props){
    super(props);
    ⭐this.state={
      Subject:{title:'WEB',sub:'World Wid Web!'}
    }
  }
  render() {
    return (
      <div className="App">
        <Subject 
        title={this.state.Subject.title} 
        sub={this.state.Subject.sub}>
        </Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is Hyper Text Markup Language."></Content>
      </div>
    );
  }
}

3. key

• 복수의 앨리먼트를 생성할 때는 key라는 특수한 props를 사용해야 함

❓ 그렇다면 예) 네비게이션 바를 만드는 경우에 페이지마다 같은 코드를 여러번 작성해야 할까?
❌ key를 사용한다면 여러번 작성할 필요가 없다.

//App.js

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

class App extends Component {
  constructor(props){ //⭐출력하고자 하는 내용을 입력 !
    super(props);
    this.state={
      Subject:{title:'WEB',sub:'World Wid Web!'},
      ⭐contents:[ //아래와 같은 부분을 key라고 칭한다.
        {id:1,title:'HTML',desc:'HTML is information'},
        {id:2,title:'Css',desc:'Css is for design'},
        {id:3,title:'JavaScript',desc:'JavaScript is for interactivs'}
      ]
    }
  }
  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 Hyper Text Markup Language."></Content>
      </div>
    );
  }
}

export default App;

--------------------------------------------------------------------------------------------------------
//TOC.js

import React, { Component } from 'react';
import { whileStatement } from '@babel/types';

class TOC extends Component {
    render() {
        var list = [];
        var data = this.props.data;
        var i = 0;
        while (i < data.length) {
			⭐//아래부분에서 key를 입력하지 않으면 js Error가 발생할 수 있다.
            list.push(<li⭐key={data[i].id}><a href={"/content/" + data[i].id}>{data[i].title}</a></li>);
            i = i + 1;
        }
        return (
            <nav>
                <ul>
                    {list}
                </ul>
            </nav>
        );
    }
}

export default TOC;

📒 Props와 State

📗 Props	📙 State
props are read-only	state changes can be asynchronous
props can not be modified	state can be modified using this.setState
스마트폰의 볼륨버튼	스마트폰의 볼륨기능