10 React에서 폼(Form) 다루기: 입력 요소의 상태 관리 및 useRef 활용

 

1. React에서 폼(Form)의 중요성

웹 애플리케이션에서 폼(Form)은 사용자 입력을 받아 처리하는 중요한 요소입니다. React에서는 폼을 다룰 때 제어 컴포넌트(Control Component)와 비제어 컴포넌트(Uncontrolled Component)라는 두 가지 방식이 있습니다. 이번 글에서는 입력 요소의 상태 관리와 useRef를 활용한 비제어 컴포넌트를 살펴보겠습니다.

2. 입력 요소의 상태 관리

입력 요소의 상태를 관리하는 가장 일반적인 방법은 useState를 사용하는 것입니다. useState를 활용하면 입력 값이 변경될 때마다 상태를 업데이트할 수 있습니다.

가. useState를 활용한 입력 요소 관리

import React, { useState } from "react";

function ControlledForm() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력된 이름: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">제출</button>
    </form>
  );
}

export default ControlledForm;

위 코드에서 useState를 활용하여 name 상태를 관리하고 있으며, 입력 값이 변경될 때마다 onChange 이벤트를 통해 상태를 업데이트합니다.

3. useRef를 활용한 비제어 컴포넌트

비제어 컴포넌트는 useRef를 활용하여 직접 DOM 요소에 접근하여 값을 가져오는 방식입니다. 상태 관리를 하지 않기 때문에 불필요한 렌더링을 줄일 수 있습니다.

나. useRef를 활용한 비제어 컴포넌트 예제

import React, { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력된 값: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">제출</button>
    </form>
  );
}

export default UncontrolledForm;

위 코드에서 useRef를 활용하여 입력 요소에 직접 접근하고 있으며, onChange 이벤트 없이도 값을 가져올 수 있습니다.

4. 제어 컴포넌트 vs 비제어 컴포넌트

비교 항목제어 컴포넌트 (Controlled)비제어 컴포넌트 (Uncontrolled)

상태 관리	useState 활용	useRef 활용
렌더링 발생	값 변경 시마다 리렌더링	값 변경 시 리렌더링 없음
활용 예	동적 검증, 실시간 입력 값 처리	빠른 폼 제출, 초기값 유지

제어 컴포넌트는 입력 값이 상태에 저장되므로 입력 값 검증이나 조건부 로직 적용에 유용합니다. 반면, 비제어 컴포넌트는 입력 값을 한 번에 가져와야 할 때 유용하며, 불필요한 리렌더링을 방지할 수 있습니다.

5. 정리

React에서 폼을 다루는 방식에는 제어 컴포넌트와 비제어 컴포넌트가 있으며, 각각의 장점과 단점이 존재합니다. useState를 사용하면 입력 값을 쉽게 관리할 수 있지만, 렌더링 비용이 증가할 수 있습니다. 반면, useRef를 활용한 비제어 컴포넌트는 렌더링을 최소화할 수 있지만 값 변경을 실시간으로 반영하기 어렵습니다.

React에서 폼을 다룰 때 프로젝트의 요구 사항에 맞게 적절한 방법을 선택하는 것이 중요합니다. 앞으로의 개발에서 이 두 가지 방식을 적절히 활용하여 효율적인 폼 관리를 해보시길 바랍니다!

4 React의 상태 관리: useState 훅으로 상태 변경과 렌더링 흐름 이해하기

 React에서 상태 관리(State management)는 UI가 어떻게 변화하는지를 제어하는 중요한 개념입니다. 컴포넌트 내에서 데이터를 다루는 방법은 매우 다양하지만, 가장 기본적이고 중요한 방법은 바로 useState 훅을 사용하는 것입니다. 이번 글에서는 useState 훅을 통해 상태를 관리하는 방법과, 상태 변경과 렌더링 흐름에 대해 쉽게 설명드리겠습니다.

1. 상태 관리란 무엇인가요?

React에서는 컴포넌트가 데이터를 가지고, 이 데이터를 화면에 표시합니다. 이때 화면에 표시되는 내용은 상태(State)라고 하며, 사용자의 입력이나 다른 이벤트에 따라 상태가 변할 수 있습니다. 상태는 컴포넌트 내부에서 관리하며, 상태가 변경되면 React는 변경된 상태를 반영하여 UI를 다시 렌더링합니다.

2. useState 훅으로 상태 관리하기

React에서 상태를 관리하려면 useState 훅을 사용합니다. useState는 상태 값을 저장하고, 상태를 변경하는 함수도 제공합니다. useState는 함수형 컴포넌트에서만 사용할 수 있습니다.

기본 사용법

import React, { useState } from 'react';

function Counter() {
  // useState로 상태 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

export default Counter;

위 예제에서 useState(0)는 count라는 상태 변수를 선언하고, 초기값을 0으로 설정합니다. setCount는 count의 값을 변경하는 함수입니다. 버튼을 클릭할 때마다 setCount를 호출하여 count 값을 1 증가시키고, 변경된 값은 화면에 자동으로 렌더링됩니다.

3. 상태 변경과 렌더링 흐름

상태가 변경되면 React는 UI를 다시 렌더링합니다. React는 상태 변경을 감지하고, 해당 상태가 사용되는 부분만 다시 렌더링하여 성능을 최적화합니다. 이 과정에서 중요한 점은 상태 변경은 비동기적이라는 것입니다.

상태 변경이 비동기적인 이유

React는 상태 변경을 큐에 쌓고, 그 후에 한 번에 처리합니다. 그래서 여러 번 상태를 변경할 경우, 마지막 상태 값만 반영될 수 있습니다. 예를 들어, 아래 코드를 보면 두 번의 setCount 호출이 비동기적으로 처리되는 것을 알 수 있습니다.

import React, { useState } from 'react';

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

  const increaseCount = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increaseCount}>카운트 두 번 증가</button>
    </div>
  );
}

export default Counter;

위 코드에서 버튼을 클릭하면 setCount(count + 1)이 두 번 호출되지만, 실제로는 count 값이 한 번만 증가할 수 있습니다. 이는 상태 변경이 비동기적으로 처리되기 때문입니다. 따라서 setCount가 호출될 때, count의 최신 값을 반영하지 못합니다.

이 문제를 해결하려면, 상태 변경을 이전 상태를 바탕으로 처리할 수 있도록 해야 합니다. React는 상태를 이전 상태를 기반으로 업데이트할 수 있는 방법을 제공합니다.

이전 상태 기반으로 상태 업데이트하기

const increaseCount = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

이 방식은 prevCount를 사용하여 항상 최신 상태값을 기반으로 업데이트되기 때문에 두 번의 setCount 호출이 모두 count를 2만큼 증가시킬 수 있습니다.

4. 상태 관리의 중요성

React에서 상태 관리는 UI의 흐름을 제어하는 핵심입니다. 사용자가 버튼을 클릭하거나 입력 값을 변경할 때, 상태가 변경되면 화면이 업데이트됩니다. 이를 통해 사용자 경험을 향상시키고, UI의 일관성을 유지할 수 있습니다. useState 훅을 잘 활용하면 상태 관리가 간편하고 직관적으로 이루어지며, 더욱 효율적인 개발이 가능합니다.

5. 결론

이번 글에서는 React의 상태 관리 개념과 useState 훅을 사용하는 방법에 대해 알아보았습니다. 상태 변경이 렌더링에 미치는 영향과 비동기적인 상태 변경 흐름을 이해하는 것이 중요합니다. 이를 통해 React 애플리케이션에서 상태를 효율적으로 관리하고, 사용자에게 빠르고 일관된 UI를 제공할 수 있습니다.

React에서 상태 관리는 필수적인 개념이므로, 기본적인 useState 사용법을 잘 익혀두고, 다양한 상황에서 이를 활용해보세요.