State 사용하기

State 사용하기

Props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import ReactState from './R024_ReactState.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <ReactState reactString={"react"}/>
    </div>
  );
}

export default App;

R024_ReactState.js

import React, {Component} from 'react';

class R024_ReactState extends Component{
  constructor (props){
    super(props);
    this.state = {
      StateString: this.props.reactString,
      StateNumber: 200,
    }
  }

  render(){
    return(
      <div style={{padding: "0px"}}>
        {this.state.StateString}{this.state.StateNumber}
      </div>
    )
  }
}

export default R024_ReactState;

코드 해설

Line 6~9

• 가장 먼저 실행되는 생성자 함수 constructor 안에서 state 변수의 초기값을 정의해야 한다.
• StateString 변수에는 props로 전달된 reactString 값을 저장하고 StateNumber 변수에는 숫자 200을 저장한다.

Line 15

• this.state.변수명 문법으로 state 변수에 접근한다. state값을 화면에 그대로 표시한다.

결과화면