• 회원가입
  • 로그인
  • 구글아이디로 로그인

React - State (상태 객체) ★

905  

목차

  1. state 객체 정의
  2. state 객체 생성
  3. state 객체 사용
  4. state 객체 변경

 

state 객체 정의

 

컴포넌트에 속하는 속성값을 저장하는 곳

 


 

1.

React 컴포넌트들은 내장된 state 객체 갖음.

 

2. 

state 객체가 변하면, 컴포넌트가 다시 렌더링 됨. 

 

 

state 객체 생성

 

state 객체는 constructor() 함수 안에서 초기화 됨.

즉, 초기 속성값이 state 객체 안에 담김.

 


[예제1] 속성값이 1개인 경우

 

import React from 'react';

import ReactDOM from 'react-dom';


class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {name: "홈짱닷컴"};

  }

  render() {

    return (

      <div>

        <h1>{this.state.name}</h1>

      </div>

    );

  }

}


ReactDOM.render(<Hz />, document.getElementById('root'));

 


[예제2] 속성값이 다수인 경우

 

import React from 'react';

import ReactDOM from 'react-dom';


class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: "홈짱닷컴",

      host: "Homzzang.com",

      memo: "홈페이지 제작관리",

      open: 2012

    };

  }

  render() {

    return (

      <div>

        <h1>{this.state.name}</h1>

        <p>

          {this.state.host}<br/>

          {this.state.memo}<br/>

          {this.state.open}

        </p>

      </div>

    );

  }

}


ReactDOM.render(<Hz />, document.getElementById('root'));

 

 

state 객체 사용

 

this.state.property_name

위 구문을 사용해 컴포넌트의 어디서든 state 객체 참조 가능.

 


[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';


class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: "홈짱닷컴",

      host: "Homzzang.com",

      memo : "홈페이지 제작관리",

      open: 2012

    };

  }

  render() {

    return (

      <div>

        <h1>{this.state.name}</h1>

        <p>

          {this.state.host}<br />

          {this.state.memo}<br />

          {this.state.open}

        </p>

      </div>

    );

  }

}


ReactDOM.render(<Hz />, document.getElementById('root'));

 

 

state 객체 변경

 

this.setState() 메서드 사용해, state 객체의 값을 변경 가능.

state 값이 변경되면, 변경 값 기준으로 페이지 다시 렌더링 됨.

 

주의:

반드시 setState() 메서드로 state 객체를 변경해야 함. 

그래야, React가 컴포넌트 업데이트 되었음을 인식해서,

render() 메서드 (및 기타 모든 수명주기 메서드)를 호출해.

변경값 기준으로 페이지가 자동으로 다시 렌더링 됨.

 


[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';


class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: "홈짱닷컴",

      host: "Homzzang.com",

      memo: "홈페이지 제작관리",

      open: 2012

    };

  }

  changeMemo = () => {

    this.setState({memo: "그누보드/영카트 강의"});

  }

  render() {

    return (

      <div>

        <h1>{this.state.name}</h1>

        <p>

          {this.state.host}<br/>

          {this.state.memo}<br/>

          {this.state.open}

        </p>

        <button

          type="button"

          onClick={this.changeMemo}

        >Change Memo</button>

      </div>

    );

  }

}


ReactDOM.render(<Hz />, document.getElementById('root'));

 



제목
React - Home (입문) + 사용 환경 구축
React - Intro (소개) - 작동 방식 + 역사
React - Start (시작) - 사용환경 설정.
React - ES6 (최신 JS의 3가지 주요 이슈)
React - Render HTML (웹페이지 렌더링)
React - JSX (= JavaScript XML)
React - Components (컴포넌트) ★
React - Props (인수 = 독립변수) ★
React - State (상태 객체) ★
React - Lifecycle (컴포넌트 수명 주기)
React - Events (이벤트) ★★
React - Forms (입력폼) ★★★
React - CSS (스타일링)
React - Sass (SCSS)
목록
찾아주셔서 감사합니다. Since 2012