react useState()

미니 프젝을 위한 리엑트 폼 만드러 보기...

나는 리엑트에 대해서 1나도 모르기 때문에

일단 구글링 ㄱㄱ

---

 

 

state 

-변수 대신 쓰는 데이터 저장 공간이다. 문자, 배열, 오브젝트,숫자 다 저장 가능함 

-use state() 를 이용해 만든다.

let [글제목, 글제목변경]=useState(['리엑트','html']);

<h3> {글제목 [0]  } </h3>
-> 글제목으로 리엑트가 들어감

-제목 수정 등 자주 바뀌는 변수를 state로 지정해준다. 

<클래스 기반 상태 관리>

import React, { Component } from "react";

class UserFormClass extends Component {
  state = { name: "", email: "" };

  handleClick = ({ target: { name, value } }) => {
    this.setState({ [name]: value });
  };

  render() {
    const { name, email } = this.state;

    return (
      <>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={name}
            onChange={this.handleClick}
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={email}
            onChange={this.handleClick}
          />
        </label>
      </>
    );
  }
}

export default UserFormClass;

 

this.state()

클래스 기반 상태 관리이고, 클래스 컴포넌트의 this.state 필드에 이름과 이메일 값을 저장해두고, 사용자가 이 값을 변경할 때 마다 값이 갱신되며 화면에 반영됨ㅇㅇ

import React, { Component } from "react";

class UserFormClass extends Component {
  state = { name: "", email: "" };

  handleClick = ({ target: { name, value } }) => {
    this.setState({ [name]: value });
  };

  render() {
    const { name, email } = this.state;

    return (
      <>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={name}
            onChange={this.handleClick}
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={email}
            onChange={this.handleClick}
          />
        </label>
      </>
    );
  }
  }

 

 

 

< 함수 기반 상태 관리 >

setstate()

함수 기반 상태 관리이다.

useState() 를 이용, 

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

첫 번째 원소는 상태 값을 저장할 변수이고 두번 째 원소는 해당 상태 값을 갱신할 때 사용할 수 있는 함수

상태 값 갱신 함수를 사용하지 않고 다른 상태 값으로 할당하면 화면에 반영되지 않음. 

function UserFormFunction() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

render()

-리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.

 

<총 코드>

import React from "react";
import {useState} from 'react';

function Input(){
        const [text, setText]=useState(' ');

        const onChange=(event)=>{
            setText(event.target.value);
        };
        const handleReset=()=>{
            setText('');
        }; //초기화 

    return(
        <div>
            <input onChange={onChange} value={text}/>
            <button onClick={handleReset}>초기화</button>
            <div>
                <b>값:{text}</b>
            </div>

        </div>

    )



}

여러 개의 객체 관리

 

const [inputs, setInputs] =useState({
	name=' ',
    nickname=''
});
const{name, nickname}= inputs;

 

import React, { useState } from "react";

function UserFormFunction() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={name}
          onChange={({ target: { value } }) => setName(value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={email}
          onChange={({ target: { value } }) => setEmail(value)}
        />
      </label>
    </>
  );
}