자주 나오기도 하고, 나올 때마다 찾아보기도 애매해서
오늘은 각잡고 공부를 했다.
용어가 무슨 뜻인지 풀어놓은 것은 이해가 잘 안갔다.
제어 컴포넌트:
사용자의 입력을 기반으로 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 |