`React` 제어 컴포넌트 vs 비제어 컴포넌트 ( value )

안녕

 

시작하기에 앞서서 개인프로젝트 진행중

value라는 속성을 굳이 왜 써야하나 하고 공부하다 보니

제어 컴포넌트와 비제어 컴포넌트에 대해서 정리하게 되었다..

 

 

 

비제어 컴포넌트

 

value 속성이 없는 입력 필드는 비제어 컴포넌트인데

이 경우 입력 필드의 값은 React 상태와 직접 연결되지 않습니다

사용자의 입력은 DOM에서 직접관리하여

입력 필드의 값은 상태가 아닌 입력필드 자체에 저장됩니다

 

<input
  type="text"
  name="country"
  placeholder="국가 입력"
/>

 

 

 

 

여기서는 value 속성이 없기 때문에

입력필드의 값은 React 상태와 연결되지 않고

사용자 입력에 의해 직접적으로 관리됩니다!

 

 

장점

 

• 상태관리가 필요 없는 간단한 입력필드에서는 비제어 컴포넌트를 사용할 수 있음
• 간단한 폼이나 사용자의 입력을 직접적으로 처리할 때 유용할 수 있음

단점

 

• 입력 필드의 값을 추적하려면 *DOM을 직접 접근해야 하고 React의 상태와 동기화하는데 어려움이 있을 수 있음
• 상태와 UI 간의 일관성을 유지하기 어려움

(*DOM =>  ref를 사용하여 입력 필드의 현재 값을 직접 접근하고 읽어올 수 있긴 함)

 

이렇게 비제어 컴포넌트 즉 value 속성이 없으면 해당 필드를 초기화 하는 등에 작업이 어려울 수 있습니다

 

 

 

제어 컴포넌트

 

 

value 속성을 사용하는 입력 필드는 제어컴포넌트이며

이 경우 입력 필드의 값은 React 상태와 직접 연결됩니다

입력 필드의 값은 상태를 통해 설정되며

상태가 변경되면 입력필드의 값도 자동으로 업데이트됩니다

 

 

<input
  type="text"
  name="country"
  value={formData.country} // 상태를 사용하여 입력 필드의 값을 설정합니다.
  onChange={updateFormData} // 입력이 변경될 때 상태를 업데이트합니다.
  placeholder="국가 입력"
/>

 

 

 

 

 

여기서는 value 속성에 상태(formData.country)를

지정하여 입력 필드의 값이 상태와 연결됐습니다

 

장점

 

• React 상태를 사용하여 입력 필드의 값을 관리하고 추적할 수 있음
• 상태가 변경되면 자동으로 UI가 업데이트되어 입력 값과 UI의 일관성을 유지할 수 있음

 

단점

 

• 렌더링이 너무 많이 될 수도 있음

 

 

 

 

 

 

 

value 속성이 없는 경우(비제어)

• 입력 필드는 비제어 컴포넌트로 작동함
• 사용자 입력은 직접적으로 DOM에서 관리됨
• React 상태와 입력 필드 간의 연결이 없음

 

 

value 속성이 있는 경우(제어)

• 입력 필드는 제어 컴포넌트로 작동함
• React 상태와 입력 필드 간의 값이 동기화됨
• 상태에 따라 입력 필드의 값이 결정됨
• 상태가 변경되면 입력 필드도 자동으로 업데이트됨

 

 

이렇게 제어 컴포넌트를 사용해서 상태를 사용하여 간편하게 코드를 다룰 수 있다는 점을 알아 보았습니다.

리액트 너무 어려워서 집중이 안되는데 누가 나 좀 제어 시켜주세요 그럼 2000 끝