Js & React 공부

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

콛 다이어리 2024. 9. 24. 23:05

자주 나오기도 하고, 나올 때마다 찾아보기도 애매해서

오늘은 각잡고 공부를 했다.

 

용어가 무슨 뜻인지 풀어놓은 것은 이해가 잘 안갔다.

 

제어 컴포넌트:

사용자의 입력을 기반으로 state를 관리하고 update 하는,

이런 방식으로 React에 의해 값이 제어되는 컴포넌트

즉, 입력한 데이터 상태와 저장된 데이터 상태가 같은 것

사용자가 입력한 값과 저장되는 값이 실시간으로 동기화 되는 것

 

function MyApp () {

      const [name, setName] = useState(null);

      

      const changeName = (e) => {

             setName(e.current.value);

       }

 

      return (

      <input onChange={changeName} value={name}/>

      )

}

 

문제점

불필요하게 리렌더링 되거나 API를 호출할 수 있음

 

사용하는 때

유효성을 검사할 경우

실시간으로 필드 검사를 해야하는 경우

조건에 따라 버튼의 활성화 여부가 변경되는 경우

 

 

 

비제어 컴포넌트:

기존 바닐라 자바스크립트와 크게 다르지 않은 방식

setState()를 쓰지않고 ref를 사용해서 값을 얻음

 

import React, { useRef } from 'React';

 

function MyApp() {

      const nameRef = useRe(null);

 

      return (

         <input ref={nameRef}/>

      )

   }

 

export default MyApp();

 

 

 

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

1. 동기화

2. 폼 개발 시에는 제어 컴포넌트 사용을 권장

3. 제어 컴포넌트에서 폼 데이터는 React  컴포넌트에서 다뤄짐

4. 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다뤄짐

'Js & React 공부' 카테고리의 다른 글

Date( )  (0) 2024.09.27
리액트 이벤트 핸들러  (1) 2024.09.26
object 형식의 데이터를 value로 확인하고 싶을 때  (4) 2024.09.13
sort와 localeCompare  (4) 2024.09.11
localeCompare  (2) 2024.09.07