[React] defalutValue와 value

React 공식문서

value

value 어트리뷰트는 <input>, <select>와 <textarea> 컴포넌트에 의해 지원됩니다. 이를 이용해 컴포넌트의 값을 설정할 수 있습니다. 이는 제어 컴포넌트를 만드는 데 유용합니다. defaultValue는 비제어 컴포넌트에서 사용되는 동등한 의미를 가지는 어트리뷰트이며, 처음 마운트될 때 컴포넌트의 값을 설정합니다.

https://reactjs-org-ko.netlify.app/docs/uncontrolled-components.html#%EA%B8%B0%EB%B3%B8%EA%B0%92-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0

 

React의 렌더링 라이프사이클에서는, 폼 엘리먼트에 지정된 value 어트리뷰트가 DOM의 값을 덮어쓸 것입니다. 반면 제어되지 않는 컴포넌트를 사용할 때, DOM의 상태변화는 제어되지 않는 상태로 두면서도 초기값을 지정해주어야 하는 경우가 있습니다. 이런 경우를 위해, defaultValue 어트리뷰트를 value 대신 사용할 수 있습니다.

 

input, select, textarea 등의 속성인 value와 defaultValue는 각각 언제 사용될까? 

defaultValue와 value 모두 태그의 값을 설정해주는것은 같다. 

하지만 value는 제어 컴포넌트(Controlled Component) 형태로 사용시에 사용하고, defalutValue는 비제어 컴포넌트(Uncontrolled Component) 형태로 사용할때 사용한다. 

 

비제어 컴포넌트 방식으로 요소가 사용될때는 DOM이 폼 데이터를 처리하기 때문에 value를 사용해도 값을 바꿀 수 없다. 따라서 defaultVlaue를 사용하여 ref.current.value 형태로 값을 제어하게 된다. 

 

 

 

 

💡 비제어 컴포넌트(Uncontrolled Component)

폼 요소를 사용할때 이벤트 핸들러를 사용해 리액트에서 state를 설정해주는 제어 컴포넌트와 달리 ref를 사용해 폼 데이터를 DOM으로부터 가져오는 방식이다. 비제어 컴포넌트는 데이터를 DOM에 두고 있기 때문에 코드의 양이 상대적으로 적다. 

 

제어 컴포넌트가 동작하는 방식

1. 사용자가 input에 값 입력
2. 입력될때마다 onChange 이벤트 핸들러가 발생하면서 setState가 실행되어 state 값이 변경됨
3. 변경된 state 값이 input의 value에 할당됨

비제어 컴포넌트가 동작하는 방식

1. 사용자가 input에 값 입력
2. form을 제출하는 버튼이 클릭될때 ref를 통해 값을 얻음 

비제어 컴포넌트를 사용할때 초기값을 지정해주어야 하는 경우가 있다. 이런 경우에 defalutValue를 사용하게 된다. 

text 타입 input, select, textarea는 defaultValue 속성을 사용하고, checkbox와 radio는 defaultChecked 속성을 사용한다.