제어, 비제어 컴포넌트 차이점
제어, 비제어 컴포넌트 장단점 정리.
제어컴포넌트와 비제어 컴포넌트
제어 컴포넌트
말 그대로 React에 의해서 값이 제어되는 컴포넌트이다.
자주 사용하는 useState를 사용해서 DOM요소의 값을 관리하면 제어 컴포넌트이다.
1
2
3
4
5
6
7
8
9
10
function App(){
const [inputVal, setInputVal] = useState("");
const handleChange = (e) => {
setInputVal(e.target.value);
}
return <input value={value} onChange={onChange} />
}
input의 값이 바뀌면 State의 값이 업데이트된다.
React의 State에 의해서 input의 value가 결정되는데 단일 출처(Single Source of Truth) 로 상태 일관성을 유지한다.
즉, useState를 사용하여 State의 값이 변경되도 input의 value도 변경된 값이 반영되기 때문에
항상 최신 값을 유지시켜주는 제어 컴포넌트가 된다.
단일 출처(Single Source of Truth)란?
단일 출처란 하나의 상태는 한곳에서만 존재해야 한다는 뜻이다.
예를 들면 State를 정의하고 여러 컴포넌트에서 해당 State를 사용해야되는 상황이라면
Props, Context 혹은 전역상태관리 라이브러리 등을 사용하게 된다.
이 것들을 사용하면 결국 상태를 여러개 만들어서 여러 곳에 사용하는 것이 아닌 한곳에서만 존재하고
이것을 다른 컴포넌트가 가지고 와서 사용하게 된다.
즉 신뢰할 수 있는 데이터라는 뜻이 된다.
제어컴포넌트 단점
제어 컴포넌트를 State로 사용하기 때문에 불필요한 렌더링이 발생한다.
이를 해결하는 방법은 쓰로틀링(Throttling)과 디바운싱(Debouncing) 으로 해결 가능하다.
쓰로틀링(Throttling)과 디바운싱(Debouncing) 은 이벤트 핸들링을 최적화하는 기법이다.
두 가지 기법으로 성능최적화와 불필요한 이벤트 호출을 줄일 수 있다.
쓰로틀링(Throttling)이란?
이벤트가 지속적으로 발생할 때 일정한 시간 간격으로만 이벤트 핸들러를 실행하도록 한다.
주로 스크롤이나 리사이즈 혹은 실시간으로 input값을 검사하는 경우 등에도 사용된다.
디바운싱(Debouncing)이란?
이벤트가 발생한 후 일정시간 동안 추가 이벤트가 발생하지 않으면 이벤트 핸들러를 실행한다.
주로 입력 폼 검증이나 검색 자동완성 등에 사용된다.
비제어 컴포넌트
말그대로 제어하지 않는 것을 의미하고, React에서 값을 보장하지 않는 방식이다.
useRef를 사용해서 DOM에 직접접근하는 방식이 비제어컴포넌트이다.
1
2
3
4
5
function App(){
const inputRef = useRef(null);
return <input ref={inputRef} />
}
State로 값을 관리하지 않으며, 입력할 때마다 리렌더링이 호출되지 않아서 성능이 향상된다.
주로, 특정 상황에서만 값을 접근해서 사용한다.
결론
상황에 맞게 적절하게 사용하면 된다.
정리
제어 컴포넌트
- 제어 컴포넌트는 state가 아니여도 리액트가 관리하면 제어 컴포넌트이다.
- 제어 컴포넌트는 단일 출처를 통해 상태 일관성을 유지시킨다.
- 값이 변경될 때마다 상태 업데이트, 이를 통해 컴포넌트 리렌더링된다.
비제어 컴포넌트
- 비제어 컴포넌트는 Ref가 아니여도 DOM에 직접접근하면 비제어이다.
- 값이 변경되도 컴포넌트가 리렌더링되지 않는다.
- 불필요한 리렌더링이 되지않아서 성능 향상되고, 간단한 폼 입력 처리에 적합하다.