[26.02.03] React 재직자 교육 4 - State 상태관리

 useXXX은 컴포넌트의 라이프 사이클에 따라 생성되고 소멸된다.

 

 

useEffect는 상태값이 바뀌면 즉, 컴포넌트가 바뀌면 이 컴포넌트는 수정이라고 보고 리랜더링된다.

다시 하위 dom이 생성된다.

 

useEffect는 처음 dom이 생성될때 실행되고 상태가 바뀌면 또 실행이 된다.

addNumber로 number라는 상태를 바꿨더니 useEffect가 실행이 된다.

 

"use client"

import { useState } from "react";

function Exam04FormState() { //리랜더링이 되면 컴포넌트 처음부터 다시 시작됨 -입력 다 날아감
  //상태 선언 - 초기값으로 객체를 줌 {}
  const [user, setUser] = useState({
    userId: "",
    userName: "",
    userPassword: "",
  });

  const handleChange = (event) => {
    //상태 변경 방법1(객체를 매개값으로 전달)
    setUser({  //동적값을 가져옴
      ...user, [event.target.name]:event.target.value
    });

    //상태 변경 방법2(함수를 매개값으로 전달)
    setUser((prevUser) => {
      return {        //동적값을 가져옴
        ...prevUser, [event.target.name]:event.target.value
      }
    });
  };

  const handdleJoin = (event) => {
    event.preventDefault();
    console.log(user);
  }

  return (
    <div className="card">
      <div className="card-header">
        FormState2
      </div>
      <div className="card-body">
        <form>
          <div className="mb-2">
            <label htmlFor="btitle" className="form-label">User ID</label>
            {/* user.userId =>상태값이다. 새로 리랜더링 되더라도 상태값을 가지고있다. form을 만들때는 상태에 무조건 저장해야됨 */}
            <input type="text" className="form-control" name="userId" value={user.userId} onChange={handleChange}/>
          </div>
          <div className="mb-2">
            <label htmlFor="bcontent" className="form-label">User Name</label>
            <input type="text" className="form-control" name="userName" value={user.userName} onChange={handleChange}/>
          </div>
          <div className="mb-2">
            <label htmlFor="bcontent" className="form-label">User Password</label>
            <input type="password" className="form-control" name="userPassword" value={user.userPassword} onChange={handleChange}/>
          </div>
          <div className="d-flex justify-content-center mb-2">
            <button className="btn btn-primary btn-sm mr-2" onClick={handdleJoin}>제출</button>
          </div>
          <div className="alert alert-success">
            <div>userId: {user.userId}</div>
            <div>userName: {user.userName}</div>
            <div>userPassword: {user.userPassword}</div>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Exam04FormState;

 

 

//상태 선언 - 초기값으로 객체를 줌 {}

  const [user, setUser] = useState({

    userId: "",

    userName: "",

    userPassword: "",

  });

  const handleChange = (event) => {

    //[상태 변경 방법1]

    // (객체를 매개값으로 전달)

    //  함수를 리랜더링할때마다 선언함

    // user라는 상태변수를 사용하고있다

    // 바로 바꿔치기 하는 코드다

    // setUser({  //동적값을 가져옴

    //   ...user, [event.target.name]:event.target.value

    // });

    //[상태 변경 방법2]

    // (함수를 매개값으로 전달)

    // 리랜더링이 되더라도 함수선언을 안하도록 하고싶다 ->성능때문에

    // 한번만 선언을 해도 되는 코드이다...?

    // 람다식을 넣는 이유? 지금 당장 할게아니고 나중에 실행되게 할려고...

    // 람다식은 상태가 변경되면 자동 콜백이 된다.

    // 콜백이 될때 user라고 하는 상태변수가 대입이 된다.

    // prevUser는 값이 들어올때 한번만 컴파일 되어도 된다.

    // 이전 상태의 값, 주소번지가 들어온다.

    // 매번 랜더링 할때마다 다시 선언할 필요가 없는 코드이다.

    setUser((prevUser) => {

      return {        //동적값을 가져옴

        //user를 그대로 쓰면 리랜더링 될때마다 주소번지가 바뀌는데 그걸 새로 가져와야된다

        ...prevUser, [event.target.name]:event.target.value

      }

    });

  };

 

 

리랜더링이 너무 자주일어나는 경우에 함수 선언을 줄여서 성능을 향상 시킬수있다.

람다식을 사용해서

 

 

form은 입력하는 값만큼 상태값으로 디폴트값을 줘야된다.

그래야 리랜더링이 되어도 상태값이 가지고 있어서 입력한 내용이 날아가지 않는다.

 

리랜더링 될 때 바뀐 상태값으로 들어간다.

 

상태를 저장하고 상태를 바로 읽고 보여주면 된다. 훨씬 쉬울수도 있다.