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

안녕하세요! 오늘은 React에서 폼을 관리하는 두 가지 주요 방법인 제어 컴포넌트와 비제어 컴포넌트에 대해 알아보겠습니다. 이 두 가지 방법은 모두 사용자 입력을 처리하는 데 사용되지만, 상태 관리 방식에서 차이가 있습니다.

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

1. 제어 컴포넌트 (Controlled Components)

정의

제어 컴포넌트는 React 컴포넌트가 폼 요소의 상태를 제어하는 방식입니다. 입력값이 컴포넌트의 상태에 의해 제어되며, 상태가 변경될 때마다 입력값도 업데이트됩니다.

특징

• 상태 관리: 입력값이 컴포넌트의 상태에 저장됩니다.
• 단방향 데이터 흐름: 입력값이 상태를 통해 제어되므로, 데이터 흐름이 명확합니다.
• 입력 검증 및 조작 용이: 상태를 통해 입력값을 검증하고 조작할 수 있습니다.

사용 예제

import React, { useState } from 'react';

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

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

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted name:', name);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" value={name} onChange={handleChange} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
}

export default ControlledForm;

위 예제에서 name 상태는 입력값을 제어하며, handleChange 함수는 입력값이 변경될 때마다 상태를 업데이트합니다.

2. 비제어 컴포넌트 (Uncontrolled Components)

정의

비제어 컴포넌트는 DOM 요소가 자체 상태를 관리하는 방식입니다. 입력값이 컴포넌트의 상태에 저장되지 않고, 대신 ref를 통해 직접 접근합니다.

특징

• 상태 관리 없음: 입력값이 상태에 저장되지 않습니다.
• 직접 접근: ref를 통해 입력값에 직접 접근합니다.
• 간단한 구현: 상태를 관리하지 않으므로 구현이 간단합니다.

사용 예제

import React, { useRef } from 'react';

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

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted name:', nameRef.current.value);
    };

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

export default UncontrolledForm;

위 예제에서 nameRef는 입력 요소에 대한 참조를 가지고 있으며, handleSubmit 함수에서 이 참조를 통해 입력값에 접근합니다.

3. 제어 컴포넌트와 비제어 컴포넌트의 차이점

특성	제어 컴포넌트	비제어 컴포넌트
상태 관리	컴포넌트 상태에 저장	DOM 요소가 자체 상태 관리
데이터 흐름	단방향 데이터 흐름	데이터 흐름이 명확하지 않음
입력 검증 및 조작 용이성	용이	불편
코드 복잡성	다소 복잡함	간단
구현 방법	useState를 통해 상태 관리	useRef를 통해 직접 접근

결론

제어 컴포넌트와 비제어 컴포넌트는 각각의 장단점이 있으며, 상황에 따라 적절한 방법을 선택하여 사용할 수 있습니다. 제어 컴포넌트는 상태를 통해 입력값을 관리하여 데이터 흐름이 명확하고 입력 검증이 용이하지만, 코드가 다소 복잡해질 수 있습니다. 반면, 비제어 컴포넌트는 상태 관리를 하지 않으므로 구현이 간단하지만, 데이터 흐름이 명확하지 않고 입력 검증이 어려울 수 있습니다. React 애플리케이션에서 폼을 구현할 때 이 두 가지 방법을 잘 이해하고 활용하면, 더 효율적인 상태 관리와 입력 처리를 할 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.