useState-Object

03-useState-array.jsx

Setup Challenge

• 세 개의 상태 값을 설정 (name, age, hobby)
• 브라우저에 렌더링
• 버튼 생성 및 함수 설정
  - 버튼 클릭 시 호출 될 함수 설정
  - 하나의 함수가 세 가지 상태 값을 모두 업데이트
• 사용자가 버튼 클릭 시 새로운 사람의 정보가 브라우저에 표시되어야 한다.

import { useState } from 'react';

const UseStateObject = () => {
  const [name, setName] = useState('철수');
  const [age, setAge] = useState(7);
  const [hobby, setHobby] = useState('책 읽기');

  const displayPerson = () => {
    setName("유리");
    setAge(8);
    setHobby('인형 놀이')
  }

  return <>
    <h3>{name}</h3>
    <h3>{age}</h3>
    <h3>취미 : {hobby}</h3>
    <button className='btn' onClick={displayPerson}>
        유리 보기
    </button>
  </>
};

export default UseStateObject;

displayPerson 함수 하나로 여러개의 상태값을 업데이트

Automatic batching

리액트에서 배치는 여러 상태 업데이트를 하나의 업데이트로 그룹화하는 과정을 말한다. 특정 경우에 유용하게 사용할 수 있으며, 이를 통해 리액트는 컴포넌트를 렌더링하는 최적화를 달성하기 위해 수행해야 하는 DOM 업데이트의 수를 최소화 할 수 있다.

기본적으로 리액트는 같은 이벤트루프 내에서 발생하는 상태 업데이트를 하나의 업데이트로 그룹화하기 위한 자동 배치(auto-batching)라는 기술을 사용한다. 짧은 시간 내에 상태 업데이트 함수를 여러 번 호출하는 경우, 리액트가 모든 업데이트에 대해 단일 re-render를 수행하는 것이다.

React v18 에서는 어떤 위치에서든 상태 업데이트가 기본적으로 배치된다. 이벤트 핸들러, 비동기 작업, 다임아웃 및 간격을 포함한 상태 업데이트를 배치한다.

Switch to Object

import { useState } from 'react';

const UseStateObject = () => {
  const [person, setPerson] = useState({
    name : '철수',
    age : 7,
    hobby : '책 읽기'
  })

  const displayPerson = () => {
    setPerson({
      name : '유리',
      age : 8,
      hobby : '인형 놀이'
    })
  }

  return <>
    <h3>{person.name}</h3>
    <h3>{person.age}</h3>
    <h3>취미 : {person.hobby}</h3>
    <button className='btn' onClick={displayPerson}>
        유리 보기
    </button>
  </>
};

export default UseStateObject;

name, age, hobby를 하나의 객체 변수로 저장하여 관리할 수 있도록 그룹화

객체 내부의 부분만 변경할 경우

 setPerson({...person, name : '유리'})

이렇게 한다면 새롭게 변경되는 값이 없을 경우 기존 값과 동일하고 변경되는 값만 수정된다.

만약 setPerson({name : '유리'}) 만 업데이트 한다면 age와 hobby는 undefined