React에서 Controlled vs Uncontrolled 컴포넌트

 

React 애플리케이션을 개발할 때, 폼 요소를 다루는 것은 매우 중요한 부분 중 하나입니다. React는 폼 요소를 제어하는 두 가지 주요 방법을 제공합니다: Controlled 컴포넌트와 Uncontrolled 컴포넌트입니다. 이 두 가지 방법은 상태 관리와 사용자 입력 처리 방식에서 차이가 있습니다. 이번 글에서는 Controlled 컴포넌트와 Uncontrolled 컴포넌트의 차이점, 장단점, 그리고 각각을 사용하는 방법에 대해 자세히 알아보겠습니다.

Controlled 컴포넌트

Controlled 컴포넌트는 React 상태(state)를 통해 폼 요소의 값을 제어하는 컴포넌트입니다. 모든 폼 요소의 상태가 React 컴포넌트의 상태로 관리되므로, 상태가 변경될 때마다 컴포넌트가 다시 렌더링되어 UI가 업데이트됩니다.

장점

1. 단방향 데이터 흐름: 모든 상태 변경이 React의 상태를 통해 이루어지므로, 데이터 흐름이 명확하고 예측 가능합니다.
2. 중앙 집중식 상태 관리: 폼 요소의 상태를 중앙에서 관리할 수 있어 상태 동기화와 검증이 용이합니다.
3. 유효성 검사: 상태 변경 시 즉각적으로 유효성 검사를 수행할 수 있습니다.

단점

1. 복잡성 증가: 상태를 관리하는 코드가 추가되므로, 코드가 다소 복잡해질 수 있습니다.
2. 성능 문제: 모든 입력 변경에 대해 상태를 업데이트하고 렌더링하므로, 성능이 저하될 수 있습니다.

예제

import React, { useState } from 'react';

function ControlledForm() {
    const [name, setName] = useState('');
    const [age, setAge] = useState('');

    const handleNameChange = (e) => {
        setName(e.target.value);
    };

    const handleAgeChange = (e) => {
        setAge(e.target.value);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(`Name: ${name}, Age: ${age}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" value={name} onChange={handleNameChange} />
            </label>
            <br />
            <label>
                Age:
                <input type="number" value={age} onChange={handleAgeChange} />
            </label>
            <br />
            <button type="submit">Submit</button>
        </form>
    );
}

export default ControlledForm;

Uncontrolled 컴포넌트

Uncontrolled 컴포넌트는 React의 상태 대신 DOM 자체에서 폼 요소의 값을 관리하는 컴포넌트입니다. 폼 요소의 값은 직접적으로 DOM에서 읽어오며, 상태 변경은 컴포넌트의 렌더링과 무관하게 이루어집니다.

장점

1. 간단한 코드: 상태 관리를 위한 코드가 줄어들어, 구현이 더 간단합니다.
2. 성능 향상: 상태 업데이트와 렌더링이 줄어들어 성능이 향상될 수 있습니다.

단점

1. 이벤트 기반 데이터 접근: 폼 요소의 값에 접근하기 위해 ref를 사용해야 하므로, 데이터 흐름이 덜 명확해집니다.
2. 유효성 검사 어려움: 상태 변경 시점에 유효성 검사를 수행하기 어려워집니다.

예제

import React, { useRef } from 'react';

function UncontrolledForm() {
    const nameRef = useRef(null);
    const ageRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        const name = nameRef.current.value;
        const age = ageRef.current.value;
        console.log(`Name: ${name}, Age: ${age}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={nameRef} />
            </label>
            <br />
            <label>
                Age:
                <input type="number" ref={ageRef} />
            </label>
            <br />
            <button type="submit">Submit</button>
        </form>
    );
}

export default UncontrolledForm;

Controlled vs Uncontrolled: 언제 무엇을 사용할까?

Controlled 컴포넌트를 사용할 때

• 폼 상태를 중앙에서 관리하고 싶을 때
• 실시간 유효성 검사와 즉각적인 피드백이 필요할 때
• 복잡한 폼 로직이 있을 때 (예: 여러 단계의 폼, 조건부 렌더링 등)

Uncontrolled 컴포넌트를 사용할 때

• 간단한 폼일 때
• 초기값이 중요할 때 (예: 파일 입력, 외부 라이브러리와의 통합 등)
• 성능 최적화가 필요할 때

결론

React에서 Controlled 컴포넌트와 Uncontrolled 컴포넌트는 각각의 장단점이 있으며, 상황에 맞게 적절히 선택하여 사용해야 합니다. Controlled 컴포넌트는 상태 관리와 유효성 검사에 유리하지만, 코드가 복잡해질 수 있습니다. 반면에 Uncontrolled 컴포넌트는 간단한 구현과 성능 이점이 있지만, 데이터 흐름이 덜 명확할 수 있습니다. 이번 글을 통해 두 가지 방식의 차이점을 이해하고, 프로젝트의 요구사항에 맞는 방식을 선택하여 사용하시기 바랍니다.