제어되는 컴포넌트
부모컴포넌트의 상태에 의해 값이 제어되는 컴포넌트를 말한다.
즉, props로 묶여있는 컴포넌트를 생각하면 될 것 같다.
-
장점
상위컴포넌트가 하위컴포넌트의 상태를 완전히 제어할 수 있음
즉, 부모는 자식 구성 요소가 수락할 수 있는 데이터에 대해 특정 제약 조건 또는 유효성 검사를 적용할 수 있으며 사용자 작업 또는 외부 이벤트에 대한 응답으로 데이터를 수정할 수도 있다.
일관성과 데이터 무결성 유지가 중요한 더 크고 복잡한 양식 또는 사용자 인터페이스에 선호되는 경우가 많다 -
단점
더 많은 코드가 필요할 수 있고 특히 복잡한 양식이나 사용자 인터페이스의 경우 설정이 더 복잡할 수 있다
시간이 지남에 따라 유지관리 및 확장이 더 어려워 질 수있다.
자식컴포넌트의 상태가 바뀜에 따라 부모컴포넌트로 전달되어야 하므로, 크거나 복잡한 양식 또는 사용자 인터페이스의 경우 제어되는 구성 요소가 느려질 수 있다
제어되지 않는 컴포넌트
내부적으로 상태를 관리하고 props에 의존하지 않는 컴포넌트
즉, 상태가 상위컴포넌트에 의해 제어되지 않음을 의미한다.
Ex) from값을 관리할 때, ref 기능을 사용해 직접 DOM에 접근 (명령형 코드)
-
장점
제어되지 않는 컴포넌트는 특정 props값이나 상태관리에 의존하지 않기 때문에 더 많은 유연성과 재사용성을 제공할 수 있다.
상위컴포넌트와 하위컴포넌트 간에 지속적으로 데이터를 주고받을 필요가 없기 때문에 렌더링 및 업데이트가 더 빠를 수 있다 -
단점
입력에 대한 제약 조건의 유효성을 검사하거나 적용하기가 더 어렵고 사용자 인터페이스에서 일관성을 유지하기 더 어렵게 만든다.
