useState는 두 개의 변수(state, setState)가 있는 배열을 반환하여 구성 요소에 상태를 추가할 수 있는 React 후크입니다. 현재 상태와 호출 시 setter 함수가 되는 함수입니다. 문자열, 숫자, 부울, 배열 또는 개체와 같이 응용 프로그램에서 추적해야 하는 데이터나 속성을 추적하는 데 사용할 수 있습니다.
예:

const [state, setState] = useState();

간단히 말하면 상태는 언제든지 변경되며 업데이트가 필요하므로 'setState'는 상태를 업데이트하여 시간이 지남에 따라 구성 요소를 다시 렌더링하도록 합니다.

또한 useState는 객체를 포함한 모든 종류의 Javascript 값을 보유할 수 있습니다. 항상 염두에 두어야 할 점은 React 상태에 있는 객체를 직접 변경해서는 안 된다는 것입니다. 먼저 새 복사본을 만들거나 기존 복사본을 만든 다음 State를 새 복사본으로 설정해야 합니다. 예를 들어:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

React 구성 요소에서 useState를 사용하려면 먼저 구성 요소 페이지 상단에 두 가지 방법으로 다음 코드를 작성하여 React 형식으로 가져와야 합니다. 둘 다 작동합니다. 완벽하게 독을 선택할 수 있습니다.

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

또는 한 줄로 작성할 수 있습니다

import React, {useState} from 'react';

React 후크 useState는 구성 요소의 최상위 수준이나 사용자 정의 후크 내에서 호출할 수 있지만 루프나 조건 내부에서는 호출할 수 없습니다.

const [initialState, setInitialState] = useState();

initialState는 초기 렌더링 중에만 사용되며 후속 렌더링에서는 무시됩니다.
initialState 함수는 setInitialState 함수에 전달되며 이전 상태를 인수로 사용하고 newState를 반환합니다.

게다가 내 생각에는 React에서 Hook을 사용할 수 있는 곳과 사용할 수 없는 곳에 대한 특별한 규칙이 없습니다. 물론 코드를 체계적으로 정리하려면 신중하고 전술적이어야 합니다.

제 프로젝트 중 하나인 SPA(Single Page App)를 구축하는 과정에는 제 목표를 달성하기 위한 다양한 구성 요소가 있었습니다. 잘 정리하는 비결은 구성 요소를 추적하는 것입니다. 예를 들어 App.js 구성 요소는 업데이트가 필요한 데이터 유형에 따라 {useState}를 사용합니다.
React의 또 다른 강력한 후크인 {useEffect}를 소개하고 이를 {useState}와 함께 사용하여 이러한 후크가 데이터에 대해 작업을 수행하는 방법을 설명하겠습니다. 다음 예는 최근 프로젝트에서 사용한 App.js 구성 요소에서 가져온 것입니다. 1년차 아이들의 발달에 도움이 될 장난감에 대한 db.json 파일 데이터를 작업하고 있었습니다. 이것은 애플리케이션 구성 요소 내부에서 {useState} 및 {useEffect}가 작동하는 프로세스를 이해하는 데 도움이 되는 내 엔드포인트 http://localhost:4000/toys입니다.

첫 번째: 초기화 상태:

const [toys, setToys] = useState([]);

• 이 줄은 빈 배열 []을 초기 값으로 사용하여 장난감 상태 변수를 초기화합니다.
• setToys는 장난감 상태를 업데이트하는 데 사용되는 함수입니다.

두 번째: 구성 요소 마운트에서 데이터 가져오기:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• {useEffect} 후크는 구성요소에서 부작용을 수행하는 데 사용됩니다.
• 종속성 배열([])이 비어 있으므로 구성요소가 마운트될 때 {useEffect} 내부 함수가 한 번 실행됩니다.

세 ​​번째: 장난감 데이터 가져오기:

• fetch("http://localhost:4000/toys")
  • 이 줄은 장난감 데이터를 가져오기 위해 지정된 URL에 대한 GET 요청을 만듭니다.
• .then(응답 => response.json())
  • 가져오기 요청의 응답이 JSON 형식으로 변환됩니다.
• .then(toysData => setToyData(toysData));
  • JSON 데이터(toysData)는 setToys 함수를 사용하여 장난감 상태를 업데이트하는 데 사용됩니다.

{useState, useEffect}가 어떻게 작동하는지 더 자세히 이해하려면 공식 React 웹사이트를 방문하세요. 또한, 또 다른 유용한 소스는 제가 개인적으로 가장 좋아하는 w3schools 웹사이트입니다. 자체 브라우저에서 시도해 볼 수 있는 예제를 통해 바로 요점을 설명합니다. 마지막으로, 좀 더 기술적인 소스가 필요하다면 mdn 웹 문서가 도움이 될 것입니다.