[리액트 공식문서 정독하기] 리액트 주요개념 - 3 (폼, 합성 vs 상속, React로 생각하기)

폼

제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는
React에서 폼(form) 관련 컴포넌트를 다룰 때 사용되는 개념이다.

 

- 제어 컴포넌트(Controlled Component)

• 상태를 사용하여 폼 입력 요소들을 관리하는 방식
• 사용자가 입력할 때마다 상태가 업데이트되며, 화면에 보이는 값과 상태가 항상 일치함
• React가 폼 데이터를 쉽게 다룰 수 있게 해줌
• useState를 사용하여 상태를 정의하고, onChange이벤트를 사용하여 입력값이 변경될 때마다 상태를 업데이트하는 방식

    <사용하는 경우>

• 복잡한 폼에서 여러 입력 요소들을 쉽게 관리하고 싶을 때
• 폼의 입력값을 바로 React 상태로 가져와서 다루고 싶을 때
• 유효성 검사 등의 로직을 통해 입력값을 제한하고 싶을 때

import React, { useState } from 'react';

function ControlledComponentExample() {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>현재 입력값: {inputValue}</p>
    </div>
  );
}

-  비제어 컴포넌트(Uncontrolled Component)

• React의 상태(state)를 사용하지 않고 폼 입력 요소를 관리하는 방식
• 사용자의 입력에 따라 React 컴포넌트의 상태를 직접 업데이트하지 않음
• 대신 ref를 사용하여 직접 입력값을 가져올 수 있음
• 상태를 관리하지 않기 때문에 코드가 더 간단하지만, 상태 관리를 직접 처리해야 하는 단점

   <사용하는 경우>

• 간단한 폼에서 상태 관리를 최소화하고 싶을 때
• 상태를 사용하지 않고 직접 입력값을 읽어오는 방식이 편리한 경우
• 외부 라이브러리와의 통합 등에서 React 상태를 사용하지 않고 폼 데이터를 다루고 싶을 때

import React, { useRef } from 'react';

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

  const handleButtonClick = () => {
    const inputValue = inputRef.current.value;
    console.log('입력값:', inputValue);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>입력값 확인</button>
    </div>
  );
}

비제어 컴포넌트는 상태를 관리하지 않기 때문에 코드가 간단해질 수 있지만,
상태 관리를 직접 처리해야 하므로 제어 컴포넌트보다 예측하기 어려울 수 있다.

 

다시 정리하자면
제어 컴포넌트는 React가 폼 데이터를 관리하는 방식이고, 비제어 컴포넌트는 React의 상태를 사용하지 않고 폼 데이터를 관리하는 방식이다. 어떤 방식을 선택할지는 폼의 복잡성과 상태 관리의 용이성 등을 고려하여 각각의 상황에 따라 선

택하여 사용하면 된다.  

---

합성 vs 상속

합성

종종 컴포넌트에 여러 개의 “구멍”이 필요할 수도 있다. 이런 경우에는 children 대신 자신만의 고유한 방식을 적용할 수도 있다.

리액트 공식문서에서는 이런 코드로 합성을 설명해주고 있다.

App 컴포넌트 레이아웃

---

React로 생각하기

단일 책임 원칙

하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙이다.

하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다.