리액트 제어 vs 비제어 컴포넌트 알아보기

리액트

🤷‍♂️ 리액트 폼 요소란?

---

리액트에서 폼(form) 요소에 상태값을 다루는 방식에 따라 제어 컴포넌트(controlled component)와 비제어 컴포넌트(uncontrolled component) 방식으로 나눠집니다.

 

이 두 가지 접근 방식엔 장단점이 있으며 상황에 맞게 선택해서 효율적으로 사용할 수 있습니다.

 

 

 

 

2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법

리액트 useLayoutEffect 개념및 사용법

 

🤷‍♂️ 제어 컴포넌트?

---

 

 

제어 컴포넌트 방식은 HTML에서 input, textarea, select와 같은 폼(form) 엘리먼트는 사용자의 입력을 기반으로 state(상태)를 관리하고 업데이트합니다.

 

폼(form) 엘리먼트에서 입력되는 상태값은 state로 관리, 업데이트됩니다.

 

즉, 리액트에 의해 값이 제어되는 입력폼 엘리먼트를 제어 컴포넌트이며 사용자가 입력한 값을 실시간으로 동기화됩니다.

 

리액트 제어 컴포넌트 공식문서

https://ko.legacy.reactjs.org/docs/forms.html#controlled-components

폼 – React

 

제어 컴포넌트 예제

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputValue, setInputValue] = useState("");

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  };

  console.log("inputValue::", inputValue);

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

 

useState hook으로 input 상태값을 제어하는 예제입니다.

제어 컴포넌트 input

사용자가 input 텍스트를 입력합니다.

제어 컴포넌트

실시간 동기화되며 input state 값을 제어합니다.

 

 

🤷‍♂️ 비제어 컴포넌트??

---

비제어 컴포넌트 방식은 폼(form)의 데이터가 state 상태 값이 아닌 바닐라 자바스크립트 방식인 DOM 요소에 의해 제어되는 컴포넌트입니다.

 

비제어 컴포넌트는 ref를 사용하여 DOM 요소에 접근하여 input, select, textarea 값을 읽어옵니다.

 

비제어 컴포넌트 예제

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Submitted value: ${inputRef.current.value}`);
  };

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

 

useRef hook 사용해서 값을 얻어오는 예제입니다.

 

비제어 컴포넌트 input

사용자가 input 텍스트를 입력합니다.

비제어 컴포넌트

 

제어 컴포넌트와 다르게 상태 값을 실시간 동기화 하지 않으며 입력값을 얻어옵니다.

 

🤷‍♂️ 제어 컴포넌트 vs 비제어 컴포넌트?

---

• 제어 컴포넌트:
  • 장점: 폼의 데이터가 컴포넌트의 state에 저장되므로, 유효성 검사, 최신 값을 유지하고 조작하는데 유용합니다..
  • 단점: 코드가 길어지고, state를 설정하고 업데이트하는 추가 작업이 필요합니다.
• 비제어 컴포넌트:
  • 장점: 코드가 간결하고, 입력 값에 접근하는 것이 더 직관적이며 사용자가 입력 시에 렌더링이 일어나지 않아 성능에 좋습니다.
  • 단점: 입력 값을 실시간으로 검증하거나 조작하기 어렵습니다. 비제어 컴포넌트의 값은 폼을 제출할 때만 확인할 수 있습니다.

 

디바운싱 & 쓰로틀링 알아보기!

https://cometruedream.tistory.com/222

프론트엔드 꼭 필요한 디바운싱과 쓰로틀링 중요 개념

 

🤷‍♂️ 제어 vs 비제어 컴포넌트 마지막으로

---

리액트에 제어 컴포넌트와 비제어 컴포넌트에 개념에 대해서 알아봤습니다.

 

폼 요소에 상태값을 다루는 두 가지 방식이 있습니다.

서비스에 적절한 방법으로 제어 or 비제어 컴포넌트 방식을 활용하시면 될꺼같습니다.

 

저는 입력 값을 실시간 유효성 검증을 하거나 입력 값에 따라서 다른 작업이 필요한 경우 제어 컴포넌트를 사용합니다.

반면에, 간단한 폼을 빠르게 구현하거나 입력 값에 따라 검증이 필요 없는 경우 비제어 컴포넌트를 사용합니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

[자바스크립트 2탄] 자바스크립트 숫자 자료구조의 개념과 내장함수