본문 바로가기
Programming/Javascript

React기초-4.state

by Wilkyway 2020. 7. 25.

오늘은 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로 전달되는 정보를 변경할 수 있게 됩니다.

 

반응형

'Programming > Javascript' 카테고리의 다른 글

React기초- 6.이벤트  (0) 2020.07.28
React기초-5.state2  (0) 2020.07.27
React기초-3.props  (0) 2020.07.25
React기초-2.컴포넌트 제작  (0) 2020.07.25
React기초-1.설치 및 환경설정  (0) 2020.07.25

댓글0