[React] (7) State 사용

  앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자.

 

지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다.

 

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 {
// render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다가 짜라
  constructor(props) {
    super(props);
    // 초기화 끝내고 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>
      <Subject title="React" sub="For UI"></Subject>
      <TOC></TOC>
      <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
    </div>
    );
  }
}

export default App;

  자, 코드를 보면서 이야기를 나눠보자. 코드에 주석을 남겨 놨는데 그것보다는 직관적으로 보고 이해하는 것이 좋을 것 같다.

 

class에 constructor(props)로 생성자를 만들고 아래 this.state에 사용하고 싶은 오브젝트를 만들면 된다.

 

그리고 render() { return }에 this.state.subject.title이나 sub으로 props를 불러오면 사용이 가능하다. 이렇게 만들면 사용자는 내부의 state를 볼 수 없다. 즉 코드를 볼 수 없다는 것이다.