리액트/기초

⚙️ useState 주요 활용 사례

lamarcK 2025. 4. 7. 22:05

1. 📝 폼 입력 값 관리 (Form Input Handling)

  • 사용자가 입력 필드 (<input>), 텍스트 영역 (<textarea>), 체크박스 (<input type="checkbox">), 라디오 버튼 (<input type="radio">), 드롭다운 (<select>) 등에 입력하거나 선택하는 값을 실시간으로 상태에 저장하고 관리한다.
  • 예시: 로그인 폼의 아이디, 비밀번호 입력 값, 회원가입 폼의 다양한 사용자 정보, 검색창의 검색어 등을 관리할 때 사용된다.
  • 목적: 사용자 입력을 받아 **유효성 검사(Validation)**를 하거나, 서버로 전송할 데이터를 준비하는 데 필수적이다.

2. 🖱️ UI 요소 상태 토글 (UI Element Toggling)

  • 모달(Modal) 창, 드롭다운 메뉴(Dropdown Menu), 아코디언(Accordion), 사이드바(Sidebar) 등의 UI 요소가 열려 있는지 (true) 또는 닫혀 있는지 (false) 상태를 관리한다.
  • 예시: 버튼 클릭 시 모달 창을 띄우거나 닫는 기능, 메뉴 항목 클릭 시 하위 메뉴를 보여주거나 숨기는 기능 구현에 사용된다.
  • 목적: 사용자 인터랙션에 따라 특정 UI 요소의 **가시성(Visibility)**이나 상태를 제어한다.

3. 🔄 데이터 로딩 상태 관리 (Data Fetching Status)

  • API로부터 데이터를 **비동기적(Asynchronous)**으로 가져올 때, 로딩 중 (Loading), 성공 (Success), 실패 (Error) 상태를 관리한다.
  • 예시: 데이터를 가져오는 동안 로딩 스피너를 보여주고, 데이터 로딩이 완료되면 실제 데이터를 화면에 표시하며, 오류 발생 시 에러 메시지를 보여주는 로직 구현에 사용된다.
  • 목적: 비동기 작업의 진행 상태를 사용자에게 명확하게 보여주고, 상태에 따라 적절한 UI를 렌더링한다.

4. 🔢 카운터 및 간단한 상호작용 (Counters & Simple Interactions)

  • 버튼 클릭 시 숫자를 **증가(Increment)**시키거나 **감소(Decrement)**시키는 카운터(Counter) 기능 구현.
  • 좋아요 버튼 클릭 수 관리, 장바구니 상품 수량 변경 등 간단한 수치 변화를 동반하는 상호작용에 사용된다.
  • 목적: 사용자의 간단한 액션에 따른 상태 변화와 그 결과를 즉각적으로 화면에 반영한다.

5. 💡 조건부 렌더링 (Conditional Rendering)

  • 특정 상태 값에 따라 화면에 다른 컴포넌트나 **엘리먼트(Element)**를 보여주거나 숨기는 로직을 구현한다.
  • 예시: 사용자가 로그인 상태(isLoggedIn)인지 아닌지에 따라 다른 네비게이션 바를 보여주거나, 특정 조건(showDetails)이 참일 때만 상세 정보를 표시하는 경우.
  • 목적: 상태에 따라 동적으로 UI 구조를 변경하여 사용자 경험을 개선한다.

6. 📊 로컬 데이터 필터링/정렬 (Local Data Filtering/Sorting)

  • 컴포넌트 내에서 관리하는 배열(Array) 데이터를 사용자의 선택에 따라 **필터링(Filtering)**하거나 **정렬(Sorting)**하는 기준 값을 상태로 관리한다.
  • 예시: 상품 목록 페이지에서 가격 범위 필터, 카테고리 필터, 이름순/가격순 정렬 옵션 등을 상태로 관리하고, 이에 따라 표시되는 상품 목록을 동적으로 변경한다.
  • 목적: 클라이언트 측에서 데이터를 사용자의 요구에 맞게 가공하여 보여준다.

📌 고려사항

  • useState는 단일 값이나 간단한 객체/배열 상태 관리에 적합하다.
  • 상태 로직이 복잡해지거나, 여러 상태가 서로 의존하며 함께 업데이트되어야 하는 경우에는 useState 대신 useReducer 훅을 사용하는 것이 더 효과적일 수 있다. useReducer는 상태 업데이트 로직을 컴포넌트 외부로 분리하여 코드의 가독성과 관리 용이성을 높여준다.

useState는 리액트 개발의 핵심이며, 위 사례 외에도 컴포넌트 내에서 변화하는 모든 데이터를 관리하는 데 광범위하게 사용된다.

 

 

📝 useState를 이용한 텍스트 입력 값 관리 방법

useState를 사용하여 <input type="text"> 와 같은 텍스트 입력 필드의 값을 관리하는 것은 리액트 폼 처리의 기본이다. 사용자가 입력 필드에 텍스트를 입력할 때마다 해당 값을 실시간으로 컴포넌트의 **상태(State)**에 반영하고 업데이트하는 방식으로 동작한다.

🔄 상태 업데이트 과정

  1. ✨ 상태 초기화:
    • 먼저, useState 훅을 사용하여 입력 필드의 값을 저장할 상태 변수와 해당 상태를 업데이트할 함수를 선언한다.
    • 텍스트 입력 필드의 초기값은 보통 **빈 문자열('')**로 설정한다.
    • 예: const [inputValue, setInputValue] = useState('');
      • inputValue: 현재 입력된 텍스트 값을 저장하는 상태 변수.
      • setInputValue: inputValue 상태를 업데이트하는 함수.
  2. 🔗 입력 필드와 상태 연결 (Controlled Component):
    • <input> 엘리먼트의 value 속성(Attribute)에 위에서 선언한 상태 변수(inputValue)를 연결(binding)한다.
    • 이렇게 하면 입력 필드의 값이 항상 리액트 상태에 의해 제어되는데, 이를 제어 컴포넌트 (Controlled Component) 방식이라고 한다.
    • 예: <input type="text" value={inputValue} ... />
  3. 🔄 변경 감지 및 상태 업데이트:
    • <input> 엘리먼트의 onChange 속성에 이벤트 핸들러(Event Handler) 함수를 연결한다. 이 함수는 사용자가 입력 필드에 타이핑할 때마다 호출된다.
    • onChange 이벤트 핸들러 함수 내에서는 이벤트 객체(event) 를 통해 현재 입력 필드의 최신 값에 접근할 수 있다 (event.target.value).
    • 이 최신 값을 useState를 통해 얻은 상태 업데이트 함수(setInputValue)에 인자로 전달하여 호출한다.
      // 이벤트 핸들러 함수
const handleInputChange = (event) => {
  const newValue = event.target.value; // 사용자가 입력한 최신 값
  setInputValue(newValue); // 상태 업데이트 함수 호출하여 상태 변경
};

// 입력 필드에 핸들러 연결
<input
  type="text"
  value={inputValue}
  onChange={handleInputChange}
/>
  4. 🔄 리렌더링 및 화면 반영:
    • setInputValue(newValue)가 호출되면, 리액트는 inputValue 상태가 변경되었음을 감지한다.
    • 리액트는 해당 컴포넌트를 **리렌더링(Re-rendering)**한다.
    • 리렌더링 과정에서 <input> 엘리먼트의 value 속성은 업데이트된 inputValue 상태 값을 반영하여 화면에 최신 입력 내용을 보여준다.

이 과정을 통해 사용자가 텍스트를 입력하는 모든 순간에 해당 값이 리액트 컴포넌트의 상태에 동기화되어 관리된다. 이렇게 관리되는 상태 값은 유효성 검사, 데이터 전송, 다른 UI 요소와의 상호작용 등 다양한 용도로 활용될 수 있다.