[리액트 훅] useState()를 이용하여 state변경하기

리액트 훅의 useState()로 상태 변경 하기

 

간단하게 form을 이용하여 유저 정보를 입력 받고 등록된 유저들을 리스트로 출력한다.

 

//app.jsx

import './app.css';
import React, { useRef, useState } from 'react';

const App = () => {
  const [users, setUsers] = useState([ //users의 초기값 = 기존 유저들 정보의 배열
    { name: 'Mina', number: '1234' },
    { name: 'bob', number: '5678' },
    { name: 'Minsoo', number: '9012' },
  ]);
  
  const name = useRef(); //form의 input을 받을 변수
  const number = useRef();//form의 input을 받을 변수
  
  const addUser = (event) => { //등록 버튼을 누르면 실행할 함수
    event.preventDefault(); //form submit시 자동으로 refresh되는것 막기.

    //form의 값들을 읽어온다
    const userName = name.current.value; 
    const userNumber = number.current.value;

	
    // 등록된 이름과 번호로 기존의 유저 배열에 새 유저값을 추가한 newUser배열을 만든다.
    const newUser = [...users, { name: userName, number: userNumber }];
 
  };

  return (
    <>
      <h1>React Hooks Test</h1>
      <form onSubmit={addUser}>
        <input ref={name} placeholder='이름 입력'></input>
        <input ref={number} placeholder='번호 입력'></input>
        <button> 등록 </button>
      </form>
      <ul>
        {users.map((user) => (
          <li>
            {user.name} : {user.number}
          </li>
        ))}
      </ul>
    </>
  );
};

이름과 번호를 받는 form과 존재하는 유저들을 보여주고 있다.

 

콘솔로그를 찍어보았다.

처음 뜨는 로그는 새 유저를 등록 하기 전의 user배열

두번째 로그는 새롭게 등록한 user name, number

세번째 로그는 받아온 정보를 넣은 newUser배열이다.

정보를 잘 받아와서 새롭게 만든 이 배열을 setUsers를 이용해 users state를 업데이트 한다.

const addUser = (event) => {
    event.preventDefault();

    const userName = name.current.value;
    const userNumber = number.current.value;

    console.log(`UserName:${userName}, userNumber:${userNumber}`);

    const newUser = [...users, { name: userName, number: userNumber }];

    setUsers(newUser);// state 업데이트
  };

그럼 user배열에 새로운 배열이 할당되어 state가 업뎃된다. 

새롭게 추가한 kim이 출력되는것을 볼 수 있다.

 

함수 안에서 새롭게 배열을 만들지 않고 setUsers함수 안에서 바로 변경 하는것도 가능함.

 

  const addUser = (event) => {
    event.preventDefault();

    const userName = name.current.value;
    const userNumber = number.current.value;

    console.log(`UserName:${userName}, userNumber:${userNumber}`);

    //const newUser = [...users, { name: userName, number: userNumber }];
    setUsers((users) => [...users, { name: userName, number: userNumber }]);
  };