React기초-4.state

오늘은 state에 대해서 알아보도록 하겠습니다.

Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다.

 

아래는 state의 예시입니다. 

 

App.js(Old)

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!" />

        <TOC />

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

기존 Subject 컴포넌트에서 props에 해당하는 title, sub 속성이 고정되어 있었습니다. 이를 조작 가능하도록 상위 컴포넌트에 해당하는 App에서 변수의 형태로 선언을 하려고 합니다. 이 경우 App 내부에서 변수와 같이 활용 가능한 속성을 state라고 합니다. 이렇게 App의 state로 선언된 속성을 하위 컴포넌트인 Subject의 props로 전달하여 변경하도록 하겠습니다.

 

App.js(New)

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
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}
        />

        <TOC />

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

 위와 같이 App 컴포넌트 내부에서 변수와 같이 사용할 속성을 선언할 때에는 this.state로 선언하고,

이를 하위 컴포넌트의 props로(title, sub) 할당하여 사용할 수 있습니다. 이렇게 선언하면 아직은 고정된 text를 출력하지만, 추후에는 App 컴포넌트 내부에서 state의 조작을 통해 Subject로 전달되는 정보를 변경할 수 있게 됩니다.