[React] useState 알아보기

💡 useState

참고영상
https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=1

React 에서 useState 는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 훅(hook)이다.

 

 

---

 

❓ state 가 뭘까?

React 에서 state 는 컴포넌트가 가질 수 있는 상태를 의미한다.

예를 들어, 쇼핑 카트 라는 컴포넌트가 있다면 state 로 items 라는 state 를 가질 수 있다.

 

 

---

 

❓ useState 기본 사용법

먼저 state 를 생성할 때 useState 함수의 인자로 초기값을 전달한다.

그러면 useState 함수는 현재 상태 값(state)과 그 상태를 업데이트하는 함수(setState)를 배열 형태로 반환한다.

const [state, setState] = useState(초기값);

// 예시
const [items, setItems] = useState(["사과", "배추", "샴푸"]);

예시를 보자.

쇼핑 카트 컴포넌트안에 items 라는 state 가 생기고 초기값은 배열을 갖는다.

이때, items 을 변경하고 싶으면 setItems(["사과", "배추", "샴푸", "휴지"]) 이렇게 부르면 된다.

setState 함수를 사용해서 state 를 변경하면 해당 컴포넌트 전체가 다시 렌더링 된다.

 

 

❔ setState 를 호출할 때 컴포넌트가 리렌더링 되는 이유

useState의 setState 함수는 상태를 변경하면 해당 컴포넌트가 리렌더링된다.

이는 React가 상태 변경을 감지하고 UI를 업데이트하기 위함이다.

 

 

❔ 초기 상태 값을 어떤 상황에서 사용하는지

초기 상태 값은 컴포넌트가 처음 렌더링될 때 사용된다.

예를 들어, 쇼핑 카트 컴포넌트에서 초기 상태 값으로 ["사과", "배추", "샴푸"] 배열을 사용하여 처음에 화면에 표시될 아이템들을 설정할 수 있음

 

 

---

 

❓ 간단한 예제

import React, { useState } from 'react';

function ShoppingCart() {
  const [items, setItems] = useState(["사과", "배추", "샴푸"]);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  return (
    <div>
      <h1>쇼핑 카트</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem("휴지")}>휴지 추가</button>
      <button onClick={() => addItem("과자")}>과자 추가</button>
      <button onClick={() => addItem("신발")}>신발 추가</button>
    </div>
  );
}

export default ShoppingCart;

코드 설명

• const [items, setItems] = useState(["사과", "배추", "샴푸"]);
  • useState 훅을 사용하여 items 라는 상태 변수와 setItems 라는 업데이트 함수를 생성
  • ["사과", "배추", "샴푸"]는 items의 초기 상태 값( 쇼핑 카트가 처음 렌더링될 때 표시될 아이템들 )

• const addItem = (item) => { setItems([...items, item]); };
  • addItem 함수는 새로운 아이템을 추가하기 위해 setItems를 호출
  • setItems([...items, item])는 기존의 items 배열을 복사하고, 새로운 아이템을 배열의 끝에 추가

• <ul>
  • items 상태 값을 기반으로 각 아이템을 렌더링

• <button>
  • 각각 "휴지", "과자", "신발"을 추가할 수 있도록 설정
  • 버튼을 클릭하면 addItem 함수가 호출되어 새로운 아이템이 카트에 추가됨

 

예제 실행 결과

화면이 처음 렌더링됐을 때 우리가 설정했던 초기값이 잘 보이는 것을 확인할 수 있음

 

 

---

 

⚠ 주의사항

state 가 업데이트 될 때마다 컴포넌트는 계속해서 렌더링이 된다.

만약 우리가 items state 의 초기값을 가져올 때, 무거운 작업을 해야된다면?

이 컴포넌트가 업데이트 될 때마다 무거운 작업을 해야되는 함수가 계속 호출되고 반복된다. -> 성능 저하

 

그래서 우리는 무거운 작업을 맨 처음 렌더링 될 때, 한 번만 호출시키고 싶은데.. 그렇게 하려면?

초기값을 넣어주는 인자에 콜백함수로 무거운 작업을 하는 함수를 불러오면 된다.

const [items, setItems] = useState(() => {
    return 무거운작업();
  });

 

 

---

 

✅ 요약

1. useState 는 리액트의 훅 중 하나로, 함수 컴포넌트에서 상태를 관리할 수 있게 해 준다.
2. const [state, setState] = useState(initialState); 와 같이 사용하며, useState 인자로 초기 상태 값을 전달
3. setState 를 통해 상태를 업데이트할 수 있음
4. 초기값을 가져올 때 무거운 작업을 해야된다면, useState( ) 괄호 안에 바로 값을 가져오는게 아니라 콜백 형태로 값을 넣어주면 된다.