반응 후크 - useState

The useState hook allows us to make our function components stateful.

상태 생성 및 초기화

호출되면 useState는 두 항목의 배열을 반환합니다. 첫 번째는 상태 값이고 두 번째는 해당 값을 설정하거나 업데이트하는 함수입니다. useState 후크는 모든 Javascript 데이터 유형이 될 수 있는 연관된 상태 조각의 초기 값인 단일 인수를 사용합니다.

array destructuring 을 사용하여 이 두 반환 값을 변수에 할당합니다.

import React, { useState } from 'react';

const Component = () => {
    const [value, setValue] = useState(initial value)
    ...

배열 요소에는 이름이 없으므로 이 두 변수의 이름을 원하는 대로 지정할 수 있습니다. 업데이터 함수의 이름을 선언하는 일반적인 규칙은 set으로 시작하고 상태 변수의 이름으로 끝나는 것이므로 [value, setValue] 입니다. 전달된 초기 상태 인수는 첫 번째 렌더링에서 상태 변수에 할당된 값이 됩니다.

다양한 데이터 유형이 있는 상태의 몇 가지 예

각 상태 부분에는 useState에 대한 자체 호출과 이를 설정/업데이트하기 위한 자체 변수 및 함수가 있습니다.

const [count, setCount] = useState(0)
const [color, setColor] = useState('#526b2d')
const [isHidden, setIsHidden] = useState(true)
const [products, setProducts] = useState([])
const [user, setUser] = useState({
    username: '',
    avatar: '',
    email: '',
})

Count는 증가 또는 감소할 숫자이며 초기 값은 0입니다. Color의 초기 값은 기본값이 녹색인 해시 코드를 포함하는 문자열입니다. isHidden은 초기 값이 true인 부울 값으로 DOM에서 숨김과 표시 사이를 전환하는 가시성을 설명한다고 가정할 수 있습니다. 제품의 초기 값은 API에서 가져올 가능성이 가장 높은 제품 목록으로 채우려는 빈 배열입니다. 사용자는 여러 속성을 가진 객체이며, 모두 기본적으로 빈 문자열입니다.

비싼 상태 초기화

항목 목록을 필터링하고 조작해야 하는 것과 같이 값을 계산하는 데 비용이 많이 든다면 초기화를 함수로 래핑하여 useState가 모든 렌더링이 아니라 한 번만 함수를 호출하도록 할 수 있습니다.

const [filteredList, setFilteredList] = useState(() => listOf10MillionItems.filter())

기본 유형 업데이트

useState로 상태 변수를 업데이트하면 항상 이전 상태가 바뀝니다. 즉, 기본 유형(문자열, 부울, 숫자) 업데이트는 값이 변경되지 않고 대체되기 때문에 간단합니다.

다음은 고전적이고 간단한 카운터 구성 요소의 예입니다. 상태에 저장된 숫자를 증가 또는 감소시키고 해당 숫자를 사용자에게 표시하거나 해당 숫자를 다시 0으로 재설정하려고 합니다.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)
  const reset = () => setCount(0)

  return (
    <div className='counter'>
      <p className='count'>{count}</p>
      <div className='controls'>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  ) 
}

export default Counter

배열 및 객체 업데이트

useState 를 사용하여 상태의 배열 또는 객체를 업데이트할 때 클래스 기반 구성 요소에서 발견되는 setState 메서드와 같이 병합되지 않고 상태가 교체될 때 전체 객체 또는 배열을 업데이트 프로그램 함수에 전달해야 한다는 것을 기억해야 합니다.

배열

const [items, setItems] = useState([])

// Completely replaces whatever was stored in the items array
setItems([{item1}, {item2}])

// Don't use JS array methods such as pop, push, shift, unshift 
// as these will not tell React to trigger a re-render. 
items.push({item3})

// Instead, make a copy of the array then add your new item onto the end
setItems([...items, {item3}])

// To update an item in the array use .map. 
// Assumes each array item is an object with an id.
setItems(
  items.map((item, index) => {
    item.id === id ? newItem : item
  })
)

사물

const Person = () => {
  const [person, setPerson] = useState({
    firstName: '',
    lastName: ''
  });

  const handleChange = (e) => {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault()
    // Form submission logic here.
  }

  return (
    <form>
      <label htmlFor='first'>
        First Name:
        <input
          id='first'
          name='firstName'
          type='text'
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label htmlFor='last'>
        Last Name:
        <input
          id='last'
          name='lastName'
          type='text'
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <button type='submit' onClick={handleSubmit}>Submit</button>
    </form>
  );
};

위의 예에서 handleChange 함수는 setPerson를 호출하고 the spread operator과 ...person를 사용하여 상태에서 person 객체를 전달합니다. state에 저장된 기존 person 객체를 전달하지 않으면 입력 값 중 하나가 변경될 때마다 전체 객체를 덮어씁니다.

중첩된 객체 및 배열

중첩된 개체 및 배열을 업데이트하려면 위의 예와 같이 각 수준을 복사하고 변경할 수 없도록 업데이트해야 합니다.

const [people, setPeople] = useState({
  jerry: {
    firstName: 'Jerry',
    lastName: 'Garcia',
    address: {
      street: '710 Ashbury Street',
      city: 'San Francisco',
      state: 'CA',
      zip: '94117'
    }
  },
  jim: {
    firstName: 'Jim',
    lastName: 'Morrison',
    address: {
      street: '8021 Rothdell Trail',
      city: 'Los Angeles',
      state: 'CA',
      zip: '90046'
    }
  }
})

// Jerry is gonna move next door
setPeople({
  // Copy people
  ...people,
  // Overwrite person you want to update
  jerry: {
    // Copy Jerry's existing properties
    ...people.jerry,
    // Overwrite Jerry's address  
    address: {
      // Copy everything over from Jerry's original address
      ...people.jerry.address,
      // Update the street
      street: '712 Ashbury Street'
    }
  }
})

복잡한 상태

여러 값이 있는 복잡한 상태가 있는 경우 useState에 저장하는 것이 번거로울 수 있습니다. 호출된 또 다른 후크는 여러 값이 있는 상태를 관리하는 데 더 적합합니다.

읽어 주셔서 감사합니다!