ref 속성을 이용한 input 값 접근.
- state를 사용하는 것보다 필요한 코드가 상대적으로 적음, 그러나 ref값을 변경하기 위해선 DOM을 직접 조작한다는 예외적인 일을 해야함.
- input에 입력된 값만 알고싶다면 ref 를 이용하는게 더 나을 수 있다.
const refName = useRef()
<input type="text" ref={refName}/>
//ref값은 .current.value 로 접근* 제어된 컴포넌트(Controlled Component), 제어되지 않은 컴포넌트(Uncontrolled Component)
-
제어된 컴포넌트 (Controlled Component): state 사용
제어된 컴포넌트는 컴포넌트의 상태(state)를 사용하여 사용자 입력을 관리합니다. 사용자 입력이 발생할 때마다 상태를 업데이트하고, 상태에 따라 UI가 다시 렌더링됩니다. 이 방식은 단방향 데이터 흐름을 따르며, 리액트의 주요 개념 중 하나인 "*SSOT(Single Source of Truth)"를 지향합니다. -
제어되지 않는 컴포넌트 (Uncontrolled Component): ref 사용
제어되지 않는 컴포넌트는 컴포넌트의 상태(state)를 사용하여 사용자 입력을 다루지 않습니다. 대신, 실제 DOM 요소에서 직접 값을 읽거나 업데이트합니다. 이 방식에서는 ref를 사용하여 DOM 요소에 접근하고, DOM 이벤트 리스너를 통해 값을 가져오거나 변경합니다.
*SSOT(Single Source of Truth) :
SSOT(Single Source of Truth)는 상태 관리 패턴으로, 애플리케이션의 상태를 하나의 소스에서 관리하는 것입니다. 상태 일관성과 예측 가능한 업데이트를 제공하여 코드의 가독성과 유지 보수성을 향상시키며 여러 컴포넌트 간 상태 동기화를 간편하게하고 테스트 용이성과 확장성을 제공합니다.
