"그때그때 필요한 방법으로 골라봐"
리액트에서 폼 입력값을 관리하는 방법에는 크게 두 가지가 있다.
1️⃣ 상태(state) 로 관리하는 방식 ⇒ Controlled Input
2️⃣ 참조(ref) 로 관리하는 방식 ⇒ Uncontrolled Input
상태로 관리하는 방식 (Controlled Input)
해당 방식은 가장 일반적인 방식이긴하나 항상 최선의 방법일 순 없다.
상태로 관리하는 방식은 다양한 장점을 가지고있지만, 단점도 있는데 장/단점은 다음과 같다.
😎 장점
- 입력값에 따라
즉각적인 UI업데이트가 가능하다. - 실시간 검증, 입력값 동기화 등의 다양한 기능구현이 가능하다.
- 여러 입력값을 연동하거나 로직이 복잡한 폼구현에 적합하다.
🤨 단점
- 입력값이 변경될 때마다 리렌더링이 발생하여 대규모 폼에서는 성능이슈가 발생할 수 있다.
그렇다면 참조로 관리하는 방식은 상태로 관리하는 방식의 단점을 대체할 수 있는 방식일까?
"Yes!"
참조로 관리하는 방식 (Uncontrolled Input)
제출버튼이 클릭되기전까지는 입력값이 변경될 때마다 컴포넌트 리렌더링을 계속 할 필요가 없다.
이럴 때 상태로 관리하기보다는 참조(ref)로 관리하는 방식으로 입력값을 관리하는 것이 더 적합하다.
참조(ref)를 사용하여 관리를 하게되면 입력값이 변경되어도 리렌더링이 발생하지 않아 성능향상에 도움이 된다.
⇒ 그렇기 때문에 단순함 폼이나 제출시점에만 입력값이 필요한 경우라면 상태보단 참조로 관리하자!
😎 장점
- 입력값이 변경되어도 리렌더링이 발생하지않아 성능측면에서 더 유리하다.
- 폼 제출 등
특정 시점에만 값이 필요할 경우 적합하다. - 대규모 폼, 외부 라이브러리 연동등 특수 상황에 적합하다.
🤨 단점
- 입력값에 따라 실시간 UI업데이트를 할 수 없다.
- 실시간 업데이트가 어려우므로 실시간으로 이루어져야하는 검증, 입력값 동기화등에는 적합하지 않다.
그렇다면 상태/참조로 관리하는 방식의 장/단점과 어떤 상황에서 어떤 방법을 사용하는 것이 좋다는건지 표로 정리해보자.
🔗 참고자료
https://ko.react.dev/reference/react/useState
https://ko.react.dev/reference/react/useRef
FE Developer .mjs