[React] useState hook 복습하기

`useState` 란 React 훅(Hook) 중 하나로, 컴포넌트에서 상태 (State) 를 관리하기 위해 사용된다. 

 

상태는 컴포넌트에서 바뀔 수 있는 데이터를 의미한다, 

예를 들어, 사용자 입력값, 클릭 횟수, API 에서 받아온 데이터 등이 상태로 관리된다. 

 

useState 사용법은 먼저 

`import { useState } from 'react';` 로 import 해 준 다음, 

 

최상단에 

`const [ count, setCount ] = useState(초기값);` 으로 사용할 수 있다

 

예시코드 

import { useState } from 'react';

function App() {
  // useState 사용법
  const [count, setCount] = useState(초기값);
  
  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>숫자 증가</button> // 여기서 상태 변경시 자동으로 다시 렌더링 된다.
    </div>
  );
}

export default App;

 

여기서 `초기값` 엔 `count` 라는 상태가 처음엔 `초기값` 으로 시작하는 것을 의미한다. 

•  `useState()` 함수는 두 가지 값을 가진 배열을 반환한다.
  • 1. `count` : 현재 상태 값!!!
  • 2. `setCount` : 현재 상태 값을 변경하기 위한 값 ( 보통 현재 상태 값 앞에 `set`이라는 단어를 추가해서 작명한다 )

 

 

 

---

useState를 사용하여 장바구니 counter 증가하는 간단한 기능 구현 및 코드 분석 해보기.

 

App.jsx

import { shopData } from "./shopData";
import { useState } from "react";
import ShopItemList from "./components/ShopItemList";

// App.jsx
function App() {
  
  const [shopList, setShopList] = useState(shopData); 
  // shopList: 현재 상태 값을 저장하는 변수
  // 초기값으로 shopData를 전달해서, 이 데이터를 shopList로 관리.
  // setShopList: 상태 값을 변경하기 위한 함수

  // onIncreaseCartCount 함수: 특정 상품의 장바구니 수량을 증가시키는 함수
  const onIncreaseCartCount = (shopId) => {
    // 매개변수로 shopId를 받음 (사용자가 클릭한 아이템의 고유 id)
    
    const newShopList = shopList.map((s) => {
      // shopList(shopData) 배열을 순회하며 각 요소를 확인 (map 함수는 새로운 배열을 반환)
      
      if (s.id === shopId) 
        // 조건: 클릭된 아이템의 id와 일치하는 경우
        return {
          ...s, // 기존 객체의 내용을 모두 복사 (스프레드 연산자 사용)
          count: s.count + 1, // count 값만 1 증가시키고 새로운 객체로 반환
        };
      else 
        // 조건: 클릭된 아이템이 아니면 기존 객체 그대로 반환
        return s;
    });

    setShopList(newShopList); // 상태 업데이트 (새로운 배열로 변경된 상태를 저장)
    // 리액트는 상태가 변경되면 자동으로 컴포넌트를 다시 렌더링함
  };

  return (
    <main>
      {/* 메인 콘텐츠 영역 */}
      <h3>Mandoo Shop</h3>

      <ul>
        {shopList.map((data) => (
          <ShopItemList
            key={data.id} // 고유한 키를 제공하여 React가 요소를 효율적으로 업데이트할 수 있도록 함
            data={data} // 각 상품 데이터 객체를 props로 전달
            onIncreaseCartCount={onIncreaseCartCount} // 증가 함수도 props로 전달
          />
        ))}
      </ul>
    </main>
  );
}

export default App;

 

• `Props`란 컴포넌트 사이에서 데이터를 전달하기 위해 사용하는 객체
  • 부모 컴포넌트 ( App ) -> 자식 컴포넌트 (ShopItemList) 로 데이터를 넘겨줄 때 사용. 

Props 는 읽기 전용이라 자식 컴포넌트는 받은 Props를 수정할 수 없다. 함수의 매개변수 처럼 사용 가능 `props.name` 

 

ShopItemList.jsx

import "./ShopItemList.css";

// 부모 컴포넌트(App)에서 전달된 props를 구조 분해 할당으로 받아 사용함.
// props: 'data'와 'onIncreaseCartCount'
const ShopItemList = ({ data, onIncreaseCartCount }) => {
  // 여기서 data는 각 상품의 정보 객체(ShopData) (ex. { id: , productName: , productPrice: , count:  })
  // onIncreaseCartCount는 부모 컴포넌트에서 전달된 함수 (장바구니 수량을 증가시키는 함수)
  
  return (
    <li>
      {/* 상품 이름 출력 */}
      <p>{data.productName}</p>  {/* data 객체에서 productName 값을 화면에 출력 */}
      
      {/* 상품 가격 출력 */}
      <p>{data.productPrice}</p>  {/* data 객체에서 productPrice 값을 화면에 출력 */}

      {/* 현재 장바구니 수량 표시 */}
      <span>장바구니 수량 : {data.count}</span>  {/* data 객체에서 count 값을 화면에 출력 */}

      {/* 장바구니 수량 증가 버튼 */}
      {/* 클릭 이벤트 발생 시 onIncreaseCartCount 함수를 호출하면서 현재 상품의 id 값을 인수로 전달 */}
      <button onClick={() => onIncreaseCartCount(data.id)}>
        장바구니 + 1
      </button>
    </li>
  );
};

export default ShopItemList;