React - 상태 (기본)

리액트 클래스에는 리액트가 가상 DOM을 관리하기 위해 특정한 순서로 호출하는 특별한 메서드들이 정의되어 있다.

render 메서드도 그런 메서드들 중 하나이다. 

Proptypes 에서 살펴봤던 this.props 속성은 컴포넌트 내에서 변경할 수 없다. (방법은 있지만 나중에....일단 없다고 생각하자)

prop(속성)와 state(상태)는 동적 혹은 정적 데이터를 UI에서 활용하는 가장 기본적인 방법이다. 

어떤 앱을 개발하든, 리액트 애플리케이션 내에서 정보를 관리하고 전달할 때는 상태와 속성을 이용한다. 

상태(state)를 언제 사용할 수 있을까?

 - 컴포넌트에 저장된 데이터를 변경하고자 하는 경우에 사용할 수 있다.

import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

const node = document.getElementById("root");

class Post extends Component {
  render() {
    return React.createElement(
      "div",
      {
        className: "post"
      },
      React.createElement(
        "h2",
        {
          className: "postAuthor",
          id: this.props.id
        },
        this.props.user,
        React.createElement(
          "span",
          {
            className: "postBody"
          },
          this.props.content
        ),
        this.props.children
      )
    );
  }
}

Post.propTypes = {
  user: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  id: PropTypes.number.isRequired
};

class Comment extends Component {
  render() {
    return React.createElement(
      "div",
      {
        className: "comment"
      },
      React.createElement(
        "h2",
        {
          className: "commentAuthor"
        },
        this.props.user,
        React.createElement(
          "span",
          {
            className: "commentContent"
          },
          this.props.content
        )
      )
    );
  }
}

Comment.propTypes = {
  id: PropTypes.number.isRequired,
  content: PropTypes.string.isRequired,
  user: PropTypes.string.isRequired
};

class CreateComment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      user: ""
    };
  }
  render() {
    return React.createElement(
      "form",
      {
        className: "createComment"
      },
      React.createElement("input", {
        type: "text",
        placeholder: "Your name",
        value: this.state.user
      }),
      React.createElement("input", {
        type: "text",
        placeholder: "Thoughts?"
      }),
      React.createElement("input", {
        type: "submit",
        value: "Post"
      })
    );
  }
}
CreateComment.propTypes = {
  content: PropTypes.string
};

const App = React.createElement(
  Post,
  {
    id: 1,
    content: " said: This is a post!",
    user: "mark"
  },
  React.createElement(Comment, {
    id: 2,
    user: "bob",
    content: " commented: wow! how cool!"
  }),
  React.createElement(CreateComment)
);

render(App, node);

다음글 : 

2019/03/13 - [전체] - React - 상태(가변 상태 - state)

2019/03/15 - [IT/React] - React - 상태(불변 상태 - props)