[REACT] 리액트의 STATE

1. REACT STATE란?

• 리액트의 state란 컴포넌트 내에서 바뀔 수 있는 값을 말합니다
• react의 컴포넌트의 props는 부모 컴포넌트로부터 받은 값을 그저 읽기 전용으로 사용할 수 밖에 없습니다.
• 그러나 react의 state를 사용하면 부모 컴포넌트로부터 받은 값으로 여러가지 데이터 처리가 가능합니다.
• 리액트의 state와 props는 구분되는 개념입니다. (같지 않음)

클래스형 컴포넌트의 state

• 클래스형 컴포넌트에서는 크게 두가지 방법으로 state를 선언할 수 있습니다.
• 첫번째는 생성자를 이용하여 state를 설정하는 방법입니다.
• 두번째는 state = {} 문법으로 선언하는 방법입니다.

 

생성자로 state를 선언하고 사용한 경우

import { Component } from "react";
import { Fragment } from "react";

class ClassComponent1 extends Component {
  constructor(props) {
    super(props);
    // 초기값을 설정한다.
    this.state = {
      count: 0,
      name: this.props.title,
    };
  }
  render() {
    const { count, name } = this.state;
    const { title } = this.props;
    return (
      <>
        <div className="class-comp">
          <div className="text-box">
            <h1>name : {name}</h1>
            <p>count : {count}</p>
          </div>
          <button
            // onClick 함수 지정
            onClick={() => {
              // this.setState를 통해 state에 새로운 값을 넣을 수 있다.
              this.setState({ count: count + 1 });
              // this.state.name += "o"; /// 이렇게 사용도 가능은 하다. 그러나 권장하지 않는 문법이다.
              this.setState({ name: name + "o" }); // 문자열 연산~
              // 위처럼 작성하면 함수는 두번 호출되었음에도 가리키는 변수가 같다면 연산은 한번만 한다.
              // 함수를 두번 호출하고 싶다면 this.setState() 함수에 인자로 화살표 함수를 넣어주어야 한다.
              // 또한 prevState를 인자를 통해서 state 값에 접근하여 연산을 하여야 한다.
              this.setState((prevState) => {
                return {
                  count: prevState.count + 1,
                };
              });

              this.setState((prevState) => ({ count: prevState.count + 1 }));
              // setState 함수는 콜백 함수가 지원된다.
              this.setState(
                (prevState) => ({ count: prevState.count + 1 }),
                () => {
                  this.setState((prevState) => {
                    return {
                      name: prevState.name + "O",
                    };
                  });
                }
              );
            }}
          >
            Like
          </button>
        </div>
      </>
    );
  }
}

export default ClassComponent1;

• state는 HTML tag의 이벤트 리스너에서 다루는 값으로 사용될 수 있습니다.
• 가령 좋아요를 누르면 카운트가 올라가는 페이지를 만들 때 사용됩니다.
• 리액트에서 이벤트 리스너에 함수를 작성하는 방법은 화살표 함수를 이용하게 됩니다.
• 리액트 컴포넌트의 state의 데이터를 수정할 때는 = 연산자로도 가능하지만, 권장되지 않습니다.
• 리액트 컴포넌트의 state값은 setState()로 변경하게 됩니다.
• 이때 인자로 들어가는 값은 자바스크립트 객체를 주게 되는데, 자바스크립트 객체의 Key 값이 컴포넌트의 state값과 일치시켜야 state의 값이 변경됩니다.

 

 

state ={} 를 이용하여 state를 선언하는 경우

import { Component } from "react";
import { Fragment } from "react";

class ClassComponent1 extends Component 
	state = {
    count: 0,
    name: this.props.title,
	}

  render() {
    const { count, name } = this.state;
    const { title } = this.props;
    return (
      <>
				(...중략...)
      </>
    );
  }
}

export default ClassComponent1;

class 컴포넌트를 통해 화면을 구성한 모습

• 컴포넌트가 위치하는 영역을 border 속성을 통해 점선으로 표시

• Like 버튼을 누르면 count와 name의 길이가 증가함

---

함수형 컴포넌트

• 함수형 컴포넌트는 useState() 함수를 통해 state를 관리할 수 있습니다.
• 함수형 컴포넌트는 es6 문법을 통해 변수로 destructuring 할 수 있습니다.
• 두 개의 변수를 destructuring 해야 하는데, 첫번째는 state 두번째는 state를 관리할 함수입니다.

import { Fragment } from "react";
import { useState } from "react";
import ProtoTypes from "prop-types";

const FunctionalComponent = ({ title, count }) => {
  const [message, setMessage] = useState("");
  const [color, setColor] = useState("");
  const onClickEnter = () => setMessage("어서오세요");
  const onClickOuter = () => setMessage("안녕히가세요");

  return (
    <>
      <div className="func-comp">
        <div className="text-box">
          <h1 style={{ color }}>{title}</h1>
          <p>{message}</p>
        </div>
        <button onClick={onClickEnter}>입장</button>
        <button onClick={onClickOuter}>퇴장</button>
        <div className="color-btn-div">
          <button onClick={() => setColor("white")}>하얀색</button>
          <button onClick={() => setColor("red")}>빨간색</button>
          <button onClick={() => setColor("skyblue")}>파란색</button>
        </div>
      </div>
    </>
  );
};

export default FunctionalComponent;

import { Fragment } from "react";
import { useState } from "react";
import ProtoTypes from "prop-types";

const FunctionalComponent = ({ title, count }) => {
  const [message, setMessage] = useState("");
  const [color, setColor] = useState("");
  const onClickEnter = () => setMessage("어서오세요");
  const onClickOuter = () => setMessage("안녕히가세요");

  return (
    <>
      <div className="func-comp">
        <div className="text-box">
          <h1 style={{ color }}>{title}</h1>
          <p>{message}</p>
        </div>
        <button onClick={onClickEnter}>입장</button>
        <button onClick={onClickOuter}>퇴장</button>
        <div className="color-btn-div">
          <button onClick={() => setColor("white")}>하얀색</button>
          <button onClick={() => setColor("red")}>빨간색</button>
          <button onClick={() => setColor("skyblue")}>파란색</button>
        </div>
      </div>
    </>
  );
};

export default FunctionalComponent;

• 함수형 컴포넌트에서는 입장, 퇴장 텍스트 표시 기능 추가
• 함수형 컴포넌트 타이틀 글자의 색상을 버튼으로 동적으로 변화하는 기능 추가

• 함수형 컴포넌트

• 입장 퇴장버튼을 누르면 텍스트가 표시된다.

• 퇴장을 누르면 글자가 바뀐다.

• 색깔 버튼으로 타이틀 글자의 색상 변경