[React] State

Study. React

State

[State 소개]

📌state와 props의 차이점

ex) 휴대폰을 사용자의 입장과 구현하는 입장으로 생각할 때

사용자의 입장: 휴대폰 버튼들 ➠ props

구현하는 사람의 입장: 내부 구현에 필요한 데이터 ➠ state

 

📌props는 사용자에게 제공하는 외부이고 사용자가 알 필요 없는 내부에서 사용되는 것이 state

 

[State 사용]

📌App.js파일에서 아래와 같이 작성

📌state값을 초기화하여 그 값으로 title="WEB" sub="world wide web"에 들어가는 값을 세팅

📌Component가 실행될 때 render() 함수보다 먼저 실행되어 초기화시켜주고 싶은 코드를 component의 constructor안에 작성

📌아래 코드처럼 세팅

class App extends Component {
  constructor(props){
    super(props);
    this.state = {}
  }

 

📌초기화가 끝나면 state의 값을 초기화하고 state화 시키기 위해서는 아래 코드처럼 작성

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

 

📌그리고 <Subject> 태그 안의 요소에 있는 title과 sub의 값을 변경해주어야 하는데 title안에 WEB 대신 this.state.subject.title로 바꿔주고 ""를 남기면 props에서는 문자로 인식해버리기 때문에 ""를 빼주고 {}를 씌어주면 WEB으로 출력

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

 

📌index.js를 보면 App이라는 component를 실행하고 있는데 state라는 것을 사용하고 있는지 모르게 은닉시켜야 함

📌그래서 App이 내부에서 사용될 때는 state를 사용해야 함

📌값의 전달은 this.~~~ 사용

 

📌App.js 지금까지 전체 코드

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

class App extends Component {
  constructor(props){
    super(props);
    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>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is Hypertext Markup Language"></Content>
        <Aside></Aside>
      </div>
    );
  }
}
export default App;

 

[key]

📌여러 개의엘리먼트를 자동으로 생성하는 경우 console창에서 각각의 리스트 항목들은 키라는 props를 가지고 있어야 한다는 에러가 뜨는데 이때 key를 이용하여 각각의 목록을 다른 것들과 구분할 수 있도록 식별자를 써주어야 함

 

📌App.js

import React, { Component } from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import Aside from "./components/Aside";
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 form design'},
        {id:3, title:'JavaScript', desc:'HTML 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>
        <Aside></Aside>
      </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;

 

 

💡state 파트도 끝났다.

마지막 key 강의가 좀 이해가 안돼서 몇 번이나 다시 들어봤는데 흠,,, 이제부터 어렵기 시작하는 건가...

그래도 하띵💪