ReactJS - 비제어 컴포넌트

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 ReactJS의 세계로 뛰어들어 "비제어 컴포넌트"라는 개념을 탐구해보겠습니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 저는 수년 동안 수많은 학생들을 안내해온 경험을 바탕으로 단계별로 안내해드리겠습니다. 당신의 좋아하는 음료를 한 잔 가져와서, 이 흥미로운 여정에 함께 동행해 주세요!

ReactJS - Uncontrolled Component

비제어 컴포넌트는 무엇인가요?

자, 구체적인 내용으로 들어가기 전에 React에서 비제어 컴포넌트가 무엇인지 이해해보겠습니다. 상상해보세요, 종이 양식을 채우고 있는 중입니다 - 당신은 정보를 작성하고, 끝나면 제출합니다. 이게 바로 React에서 비제어 컴포넌트가 작동하는 방식입니다!

React에서 비제어 컴포넌트는 자신의 상태를 내부적으로 관리하는 폼 요소를 의미합니다. React이 관리하지 않고, 폼 요소가 자신의 '頭'(頭脳)를 가지고 있는 것입니다!

비제어 컴포넌트의 폼 프로그래밍

이제 우리는 손을 dirtier하게 만들고 코드로 들어가겠습니다. 비제어 컴포넌트가 폼 프로그래밍에서 어떻게 작동하는지 간단한 예제를 통해 설명해보겠습니다.

기본 비제어 입력

여기 기본적인 비제어 입력 예제가 있습니다:

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">이름:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

이 예제에서 우리는 이름을 입력하는 간단한 폼을 가지고 있습니다. 상태나 onChange 핸들러가 없는 것을 주의해보세요. 그것은 입력이 자신의 상태를 내부적으로 관리하고 있기 때문입니다.

입력 값에 접근하기

하지만, 당신은 물을 수도 있을 것입니다, "React가 관리하지 않으면 입력 값을 어떻게 가져올 수 있나요?" 멋진 질문입니다! 우리는 ref를 사용하여 DOM 노드에 직접 접근할 수 있습니다. 예제를 수정해보겠습니다:

import React, { useRef } from 'react';

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

const handleSubmit = (event) => {
event.preventDefault();
alert('제출된 이름: ' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">이름:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">제출</button>
</form>
);
}

export default SimpleForm;

이 업데이트된 버전에서 우리는 useRef 훅을 사용하여 입력에 대한 참조를 만듭니다. 폼이 제출될 때, 우리는 inputRef.current.value를 사용하여 입력의 값을 가져올 수 있습니다.

간단한 폼 생성

이제 기본적인 내용을 이해했으므로, 비제어 컴포넌트를 사용하여 더 포괄적인 폼을 만들어보겠습니다.

다중 입력 폼

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('폼 데이터:', formData);
// 여기서 일반적으로 데이터를 서버로 보냅니다
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">이름:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">이메일:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">메시지:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">메시지 보내기</button>
</form>
);
}

export default ComplexForm;

이 예제에서 우리는 이름, 이메일, 메시지 세 가지 필드를 가진 폼을 만들었습니다. 각 필드는 자신만의 참조를 가지고 있어 폼이 제출될 때 값을 가져올 수 있습니다.

설명

우리는 각 입력에 대해 useRef를 사용하여 참조를 만듭니다.
handleSubmit 함수에서 기본 폼 제출 동작을 방지하고 각 입력의 값을 참조를 통해 가져옵니다.
우리는 폼 데이터를 콘솔에 로그합니다 (실제 애플리케이션에서는 이 데이터를 서버로 보냅니다).

비제어 컴포넌트의 장단점

이제 비제어 컴포넌트를 사용하는 장점과 단점에 대해 논의해보겠습니다:

장점	단점
기본 폼에 대한 간단한 코드	폼 값에 대한 제어가 덜합니다
비React 코드나 라이브러리와의 통합에 유용	동적 폼 검증 구현이 어렵습니다
매우 큰 폼에 대한 잠재적으로 더 나은 성능	프로그래밍적으로 폼 값을 초기화하기 어렵습니다
파일 입력과 잘 작동합니다	"React-like"가 아님 - 단일 진리 소스 원칙을 따르지 않습니다

비제어 컴포넌트를 사용할 때

비제어 컴포넌트는 특정 시나리오에서 유용할 수 있습니다:

비React 코드나 라이브러리와의 통합
실시간 검증이나 동적 업데이트가 필요하지 않은 간단한 폼
파일 입력 처리

그러나 대부분의 React 애플리케이션에서는 제어 컴포넌트(React가 폼 상태를 관리하는 경우)가 더 많이 사용됩니다. 제어 컴포넌트는 더 많은 제어를 제공하고 React의 철학과 더 잘 맞습니다.

결론

그렇게 해서 우리는 React의 비제어 컴포넌트 세계를 여행했습니다. 기억해 두세요, 제어 컴포넌트와 비제어 컴포넌트를 선택하는 것은 수동차와 자동차를 선택하는 것과 같습니다 - 특정 필요에 따라 다릅니다.

마무리하면서, 제가 한 학생한테 들은 말이 떠오릅니다, "React는 요리와 같아 - 때로는 정확한 측정이 필요하고, 때로는 눈으로 맞추면 됩니다." 비제어 컴포넌트는 눈으로 맞추는 것과 같아 - 그들에게 자리가 있지만, 지혜롭게 사용하세요!

이 가이드가 비제어 컴포넌트의 길을 밝혀주길 바랍니다. 계속 연습하고, 코딩을 계속하세요, 기억하세요 - 프로그래밍의 세계에서, 모든 오류는 성공으로 가는 단계입니다!

미래의 React 마스터 여러분, 행복하게 코딩하세요!

Credits: Image by storyset